🔄

Tab Sync Dashboard

postal BroadcastChannel transport demo

synced
Tab: —

Auth

Login syncs across all open tabs

Open another tab and log in — both tabs will update.

Theme

Toggle syncs instantly across all tabs

🌙 Dark mode

Preferences

Changes sync across all tabs and persist on reload

Notification sounds
Play a sound on new notifications
Compact view
Reduce spacing for denser layout

Activity Log

All messages — powered by wiretap

0
📡

Interact with the controls
or open another tab

How postal makes this work

Cross-tab state sync with localStorage for persistence and BroadcastChannel for real-time notification. Two APIs, two lines of postal setup.

BroadcastChannel transport

Two lines of setup: createBroadcastChannelTransport("tab-sync-demo") and addTransport(transport). No handshake, no connection management — any tab that opens the same-named channel is immediately in the mesh.

The production pattern

localStorage holds the authoritative state — a new tab that loads while others are open hydrates from storage via loadState() and renders immediately. Live changes sync via postal so every open tab stays consistent without polling.

Echo prevention in postal core

Outbound envelopes are stamped with source: instanceId. Inbound envelopes matching the local instance are dropped in transport.ts before subscribers fire. User actions just publish — subscribers handle all state mutation regardless of origin.

Wiretap observability

addWiretap(callback) registers a global observer that sees every message on the bus — both local publishes and messages arriving from other tabs via the transport. The activity log above is 100% wiretap.

View source on GitHub postal docs →