A zero-dependency, framework-agnostic state management library for synchronizing state across browser tabs and windows.
channel-state
is a lightweight, powerful state management library designed for modern web applications. It leverages the native BroadcastChannel
API to seamlessly synchronize state across all browser contexts (tabs, windows, iframes) of the same origin. With an optional persistence layer using IndexedDB
, it ensures your application's state can be restored across sessions, providing a fluid user experience.
Built with TypeScript and with zero external dependencies, channel-state
offers a minimal footprint and maximum flexibility. It includes dedicated, easy-to-use wrappers for popular frameworks like React, Vue, and Svelte, making integration a breeze.
BroadcastChannel
API.IndexedDB
to restore it after page reloads or browser restarts.@channel-state/core
package works with any JavaScript project.This repository is a monorepo containing the following packages:
Package | Version | Description |
---|---|---|
@channel-state/core |
The core, framework-agnostic library. | |
@channel-state/react |
React hooks for channel-state . |
|
@channel-state/vue |
Vue composables for channel-state . |
|
@channel-state/svelte |
Svelte stores for channel-state . |
# Install the core library
npm install @channel-state/core
# Install for React
npm install @channel-state/core @channel-state/react
# Install for Vue
npm install @channel-state/core @channel-state/vue
# Install for Svelte
npm install @channel-state/core @channel-state/svelte
# Install the core library
yarn add @channel-state/core
# Install for React
yarn add @channel-state/core @channel-state/react
# Install for Vue
yarn add @channel-state/core @channel-state/vue
# Install for Svelte
yarn add @channel-state/core @channel-state/svelte
# Install the core library
pnpm add @channel-state/core
# Install for React
pnpm add @channel-state/core @channel-state/react
# Install for Vue
pnpm add @channel-state/core @channel-state/vue
# Install for Svelte
pnpm add @channel-state/core @channel-state/svelte
# Install the core library
bun add @channel-state/core
# Install for React
bun add @channel-state/core @channel-state/react
# Install for Vue
bun add @channel-state/core @channel-state/vue
# Install for Svelte
bun add @channel-state/core @channel-state/svelte
For detailed usage, please refer to the README file of the specific package you are using.
For direct browser usage, you can use the UMD builds from a CDN like jsDelivr or unpkg. For detailed instructions and the required script tags for each package, please see the "CDN Usage" section in the respective package's README:
@channel-state/core
README@channel-state/react
README@channel-state/vue
README@channel-state/svelte
READMEExplore and experiment with channel-state
in a live environment using our interactive playground.
This playground provides a simple example of how to use @channel-state/core
and @channel-state/react
together.
Note: To see the cross-tab state synchronization in action, open the preview in a new tab.
Contributions are welcome! Please read our Contributing Guidelines to get started. All contributors are expected to adhere to our Code of Conduct.
This project is licensed under the Apache-2.0 License.