Projects sharing features with Use Persisted State

This project is a cross-window 3D visualization system that maintains a consistent scene state across multiple open browser instances. It utilizes a local storage state synchronizer to share real-time application data between different browser tabs. The system coordinates Three.js environments by syncing the internal scene graph, camera angles, and object positions. It achieves this through event-driven state propagation, allowing updates in one window to be reflected in all others without a dedicated backend server. The implementation includes window lifecycle management to track the creati

usehooks-ts is a comprehensive collection of reusable TypeScript-based hooks designed for managing state, DOM events, and browser API interactions within React applications. It provides a typed library of functions to handle common frontend patterns and side effects. The project distinguishes itself by offering specialized hooks for browser integration, including tools for interacting with the system clipboard, managing local and session storage persistence, and loading external scripts. It also includes utilities for responsive UI development, such as tracking media queries, window dimension

Easy-peasy is a React state management library and typed framework that provides a centralized store for managing global application state. It functions as an immutable state store and an async state orchestrator, ensuring end-to-end type safety for state definitions, actions, and derived values. The library distinguishes itself by converting direct mutation syntax into immutable updates to simplify the management of nested data. It includes a mechanism for persisting the state tree to storage and rehydrating it during the application boot process, with the ability to suspend the user interfa

This project is a collection of reusable React hooks designed to wrap browser APIs, manage state persistence, and handle DOM observation. It provides a consistent interface for integrating native browser capabilities directly into the React component lifecycle. The library includes specialized toolkits for monitoring the browser environment, such as window resizing, network connectivity, and viewport visibility. It also provides mechanisms for managing execution timing through debouncing, throttling, and the control of timeouts and intervals. Additional capabilities cover state management wi

This project is a comprehensive collection of reusable code snippets, custom hooks, and implementation patterns for building user interfaces with React. It serves as a library of short examples designed to solve common development tasks, ranging from state management to DOM integration. The collection provides a wide array of specialized utilities for interacting with browser APIs, including window dimension tracking, media query evaluation, and online status monitoring. It also includes practical guides and snippets for performance optimization, such as memoization, lazy loading, and state c

react-use is a collection of reusable state and effect hooks for managing common logic in React applications. It serves as a comprehensive library for implementing state management patterns and wrapping various browser APIs into consistent hook interfaces. The project provides a specialized toolkit for DOM interaction and browser API integration, allowing components to track element dimensions, manage cookies, and monitor hardware sensors. It includes a suite of animation and timing utilities for physics-based numeric interpolation and frame-synced state updates. Beyond basic state managemen

Recoil is an atomic state management framework and library for React. It functions as a state container that breaks application data into independent units called atoms to minimize unnecessary component re-renders. The system integrates with React hooks to provide a reactive state store. It utilizes a graph-based approach to data flow, employing a dependency graph to track relationships between state units and propagate updates automatically. The library coordinates global state across complex component trees, enabling independent components to communicate and share data without manual prop

unstated-next is a lightweight state management library for React that shares state and logic across components. It functions as a tool to transform custom hooks into shared state containers, providing a minimalist approach to synchronizing data without the use of complex external state stores. The project uses a provider-consumer pattern to decouple state definition from its usage. It wraps custom hooks into context containers to reduce manual boilerplate, allowing state and methods to be broadcast from a central provider to deeply nested child components. The system supports state containe

Jotai is a state management library for React applications that utilizes an atomic model to handle data. It organizes application state into small, independent units called atoms, which automatically track dependencies and trigger granular updates to components. By building state through these composable primitives, the library ensures that only the necessary parts of an application re-render when data changes. The library distinguishes itself through its flexible approach to state composition and asynchronous data handling. It integrates promises directly into the state model, allowing devel

jscamp is a full-stack web development and education project focused on mastering JavaScript, TypeScript, and AI integration. It provides a structured curriculum and interactive exercises covering language fundamentals, frontend engineering, and backend API development. The project distinguishes itself through the implementation of autonomous AI agents capable of complex task automation, such as modifying files, managing servers, and executing API calls. It includes advanced AI development tools for conversational querying, real-time code suggestions, and automated repository analysis to gene

Pixel-editor is a browser-based graphics tool designed for the creation and editing of pixel art. It provides a digital drawing environment that allows users to manipulate individual pixels on a grid-based canvas to produce retro-style graphics and sprite assets directly within a web browser. The application features a local storage workspace manager that enables users to maintain a customizable creative workflow. By saving interface preferences and tool visibility settings directly to the browser, the editor allows for persistent workspace configurations tailored to specific project requirem

Scriptcat is a user script manager and browser extension designed to install, execute, and manage custom JavaScript scripts to modify website behavior and extend browser functionality. It features a JavaScript sandbox environment that provides specialized APIs for storage, cookies, and system notifications, alongside a cloud-synced script repository to keep subscriptions and configurations consistent across multiple devices. The project includes an in-browser script editor for writing, testing, and debugging code directly within the browser. It also incorporates a cross-domain request engine

ArtPlayer is a modular, browser-based media library designed for embedding and controlling video content within web applications. It functions as a programmable web component that provides developers with granular control over the playback engine, event handling, and the underlying video elements. The player distinguishes itself through a plugin-based architecture that allows for the injection of custom functionality, such as specialized visual effects, advertising, or quality controls, without modifying the core codebase. It utilizes a layered overlay system for interactive UI design, enabli

This application is a browser-based document editor designed for the creation of professional single-page resumes. It functions as a local-first tool, ensuring that all user information remains within the client environment and is never transmitted to external servers. The platform distinguishes itself through a privacy-focused architecture that relies entirely on local device storage. Users construct resumes through a modular interface that synchronizes visual changes in real time, allowing for the customization of layout templates and themes without the need for account creation or server-s

N-Tab is a browser extension designed to manage browser tab lifecycles by consolidating open web pages into organized, virtual sessions. It functions as a session management tool that allows users to group tabs into custom folders, recover recently closed pages, and reduce system memory usage by offloading active tabs into a centralized interface. The extension distinguishes itself through its support for cross-device synchronization, enabling users to back up and share saved tab configurations across multiple browser instances via remote cloud storage. It also provides a declarative command

EpicEditor is a JavaScript-based Markdown editor designed as an embeddable UI component for web applications. It functions as a local-first content manager, utilizing browser local storage for automatic draft saving and offline content persistence. The editor is distinguished by its use of iframes to isolate styles, preventing CSS leakage between the editor and the host application. It features a customizable Markdown parser that allows developers to replace the default parsing engine with custom functions to transform text into specific output formats. The system provides a split-pane inter

This project is a comprehensive collection of web development exercises and application concepts designed to help developers practice and improve their technical proficiency. It serves as a curated resource for building diverse software projects, ranging from simple utility tools to complex, interactive web applications that demonstrate core programming and interface design skills. The repository distinguishes itself by providing a wide array of practical implementation challenges that cover the full spectrum of frontend and full-stack development. Users can engage with tasks that require man

This project is a reference library and collection of practical code samples for building browser extensions using WebExtensions APIs. It provides implementation guides and functional examples for core extension components, including content scripts, background processes, and browser action popups. The repository focuses on demonstrating specific implementation patterns for browser UI customization and web page manipulation. It includes samples for creating sidebars, context menus, and options pages, as well as techniques for injecting scripts and styles to alter DOM elements and page appeara

Satellizer is an authentication library for AngularJS applications designed to manage user sign-in and session persistence using security tokens. It functions as a client-side implementation for exchanging credentials for tokens and attaching authorization headers to network requests. The library handles identity integration through a token manager that supports both email-based authentication and external OAuth providers. It enables the authorization of users via third-party services using secure popup windows and allows for linking or unlinking external accounts to a user profile. The proj

Pixel Art React is a browser-based pixel art editor that runs entirely client-side with no server dependency. It provides a grid canvas for drawing and editing pixel art, along with a frame-based animation engine that cycles through multiple frames with configurable playback speed controls. The editor distinguishes itself through its export capabilities, offering multi-format downloads as static images, animated GIFs, or sprite sheets. It also generates CSS code using box-shadow and keyframe techniques, allowing pixel art and animations to be embedded directly into web pages. Projects are per

Dexie.js is a wrapper library for IndexedDB that provides a simplified interface for managing and querying structured data within the browser. It functions as a browser database manager used to maintain persistent application state and store binary blobs and records. The project serves as an offline-first data store that synchronizes browser data with remote servers to maintain consistency across sessions. It also acts as a reactive database store by monitoring data changes in real time to trigger automatic user interface updates, and functions as a client-side search engine for indexing and

Nullboard is a local-first productivity tool and browser-based note organizer. It functions as a Kanban task board for tracking workflows and organizing tasks into draggable notes and lists within a minimalist interface. The project features a customizable Kanban UI that allows users to adjust visual preferences, including themes, font families, font sizes, and layout widths. The system manages data through local browser storage for offline access, supplemented by board file imports and exports and token-based remote synchronization for backups. It includes a revision-based undo system for

Whitebophir is a collaborative whiteboarding application designed for real-time visual collaboration. It enables multiple users to brainstorm and create content together on a shared virtual canvas using freehand sketching, geometric shapes, and text labels. The platform focuses on private workspace management, allowing the creation of restricted boards via unique URLs and token-based access control to manage editing permissions. It integrates real-time state synchronization for drawing updates and a built-in chat system for text communication between collaborators. The workspace includes too

Authenticator is a multi-factor authentication manager and browser extension designed to generate and store two-step verification codes directly within a web browser. It functions as an encrypted secret store that produces both time-based and counter-based security codes to protect online account access. The project distinguishes itself through cross-browser synchronization, replicating authentication accounts across different browser instances using cloud or local backups. It utilizes password-based encryption to protect authentication seeds and provides a synchronization tool to maintain co

js-cookie is a lightweight JavaScript library and browser storage interface used to create, read, and delete cookies. It provides a programmatic API for managing client-side data persistence and maintaining browser state across page refreshes. The library includes capabilities for custom cookie encoding and the use of custom value converters to handle specific character formats. It also features a global attribute configuration system that allows default expiration, security, and scope rules to be applied automatically to all cookie operations. The tool covers general cookie management inclu

Reader is a digital content reader and browser-based document viewer. It functions as a digital library manager and content aggregator that collects articles and documents from various online sources into a single interface. The project utilizes a JSON-driven approach to organize and display hierarchies of digital documents. It incorporates a REST-based aggregation model to fetch reading materials and metadata from remote servers for a unified viewing experience. The application provides client-side rendering for digital texts and manages personal collections through a digital library system

Dockview is a UI framework for building complex, desktop-like interfaces featuring dockable layout components, interactive tab grouping, and a cross-platform panel system. It provides the tools necessary to create environments with draggable tabs, split-views, and customizable panel arrangements. The system is distinguished by its multi-window layout manager, which allows panels to be detached into separate browser windows for multi-monitor setups. It further supports a state-persistent architecture that saves and restores the exact position and configuration of views across different user se