BroadcastChannel Cross-Tab Sync — Free Demo With Live Log

BroadcastChannel is the browser's native publish/subscribe channel between same-origin browsing contexts — tabs, windows, iframes, and workers can all join a channel by name and send each other messages with postMessage, with no server round-trip involved. This snippet demonstrates it with the simplest possible payload: a shared counter that stays in sync everywhere the page is open.

How the sync actually works

Every instance of the page opens new BroadcastChannel('bcs-demo-counter'). Clicking + or − updates the local count and calls channel.postMessage({ type, value, tabId }); every *other* open instance receives that message in its channel.onmessage handler (a channel never receives its own messages) and updates its own count to match. There's no polling and no server — the browser delivers the message directly to every other same-origin context subscribed to that channel name, typically within milliseconds.

Why one tab can't prove this on its own

The whole point of BroadcastChannel is *cross*-tab communication, so a single open tab can't visually demonstrate it — you need a second real tab open to the same page to see a message arrive from outside. This snippet makes that obvious with instructions right in the UI, but also includes a same-page "simulate a second tab" button, which opens a genuinely independent second BroadcastChannel instance inside the same document. The browser treats it identically to a second tab — it's a separate object with its own onmessage handler — so you can watch a message actually leave one channel instance and arrive at another without opening a second window.

A live log of both directions

Every send and every receive is written to a timestamped log, labeled with which "tab" it came from, so the direction of each message is never ambiguous — useful for actually seeing the asynchronous, fire-and-forget nature of postMessage.

Fallback for unsupported browsers

BroadcastChannel is broadly supported in evergreen browsers but missing from a handful of older or embedded webviews. When 'BroadcastChannel' in window is false, the snippet falls back to the classic localStorage storage-event trick: writing to localStorage in one tab fires a storage event in every *other* same-origin tab (never the writer), which is a well-known, near-universally-supported way to achieve the same cross-tab notification. The status text always states plainly which mode is active. Pair this with a web locks tab coordinator for a fuller multi-tab coordination toolkit, or a live visitor counter for a related shared-state dashboard idea.