{"library":"persist-and-sync","title":"persistNSync","description":"Zustand middleware for persisting and syncing state across browser tabs, windows, and iframes (same origin). Current stable version is 1.2.3, released regularly with a focus on reliability. It uses the Broadcast Channel API for instant cross-tab synchronization and localStorage (or sessionStorage/cookies) for persistence. Differentiators include sub-1kB size, full TypeScript support, fire-and-forget state updates optimized for single-user systems, and exclude/include filters for selective syncing. Alternatives like zustand's built-in persist middleware lack cross-tab sync out of the box.","language":"javascript","status":"active","last_verified":"Sat Apr 25","install":{"commands":["npm install persist-and-sync"],"cli":null},"imports":["import { persistNSync } from 'persist-and-sync'","import type { PersistNSyncOptions } from 'persist-and-sync'","const { persistNSync } = require('persist-and-sync')"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { create } from 'zustand';\nimport { persistNSync } from 'persist-and-sync';\n\ntype MyStore = {\n  count: number;\n  increment: () => void;\n};\n\nconst useStore = create<MyStore>(\n  persistNSync(\n    (set) => ({\n      count: 0,\n      increment: () => set((state) => ({ count: state.count + 1 })),\n    }),\n    { name: 'counter-storage' }\n  )\n);\n\n// In a React component:\nfunction Counter() {\n  const { count, increment } = useStore();\n  return <button onClick={increment}>Count: {count}</button>;\n}","lang":"typescript","description":"Creates a Zustand store with persistNSync middleware; state is persisted to localStorage and synced across tabs.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}