@lorb/tab-sync

Cross-tab state sync via BroadcastChannel. Login in one tab, every tab knows.

Install

npm install @lorb/tab-sync

Usage

import { init, sync, on } from '@lorb/tab-sync';

const cleanup = init();

// Sync any value across tabs
sync('cart', { items: 3 });
on('cart', (value) => updateCartBadge(value.items));

Auth sync -- the most common case:

import { init, syncAuth, onAuthChange } from '@lorb/tab-sync';

init();

// Tab A: user logs in
syncAuth(token);

// Tab B, C, D: instant update
onAuthChange((token) => {
  if (!token) window.location.href = '/login';
});

Theme sync:

import { init, syncTheme, onThemeChange } from '@lorb/tab-sync';

init();

syncTheme('dark');
onThemeChange((mode) => {
  document.documentElement.dataset.theme = mode;
});

Why

Users expect cross-tab consistency. BroadcastChannel does this natively, but the raw API is tedious. tab-sync adds typed key-value sync, built-in auth/theme helpers, and automatic leader election in a few lines.

API

• init() -- start syncing, returns cleanup function
• sync(key, value) -- broadcast a value to all tabs
• on(key, callback) -- listen for changes from other tabs
• get(key) -- get the last synced value
• syncAuth(token) / onAuthChange(cb) -- auth shorthand
• syncTheme(mode) / onThemeChange(cb) -- theme shorthand
• tabCount() -- number of active tabs
• isLeader() -- whether this tab is the leader
• onLeaderChange(cb) -- leader election events
• destroy() -- teardown

SSR-safe. No-op when BroadcastChannel is unavailable.

License

MIT -- Lorb.studio