BroadcastChannel - Interactive Lab | IconVault

Real cross-tab messaging with BroadcastChannel: chat between tabs, ping round-trips and a live leader election. Free, in-browser.

All tools

BroadcastChannel

Cross-tab messaging with live leader election

5 of 5 free uses left

Channel

This tab: tab-w6wt7j

Message

5 of 5 free messages left. Nothing leaves your device.

Live channel traffic

Connect, then open this page in a second tab.

Messages, pings and election bids from every tab appear here in real time.

How the election works

Each tab broadcasts an election bid with its random id and collects bids for 800ms. The highest id wins and broadcasts victory; every tab then knows its role. This is a simplified bully algorithm running over a real BroadcastChannel: useful for electing one tab to do polling, hold a WebSocket, or run timers while the rest stay idle.

About this tool

IconVault's BroadcastChannel playground opens a real named channel: connect, open the page in a second tab, and send messages that arrive instantly in every tab. Ping measures cross-tab round trips, and the leader-election demo runs a genuine bully algorithm over the channel so one tab becomes leader while the rest follow. It is free and runs fully in your browser.

BroadcastChannel is the simplest way for same-origin tabs, windows and iframes to coordinate: no server, no storage events hack. The lab shows the message protocol in the open, explains why the sender never receives its own broadcast, and covers the classic use cases: electing one tab to hold a WebSocket, avoiding duplicate polling, and syncing logout or theme changes across tabs.

Frequently asked questions

Popular searches

broadcastchannelbroadcast channel apibroadcastchannel javascriptbroadcastchannel examplecross tab messagingcommunicate between tabs javascripttab to tab communicationbroadcastchannel demobroadcastchannel tutorialleader election javascriptbully algorithm javascriptelect leader tabone tab websocketavoid duplicate polling tabssync tabs javascriptlogout all tabsstorage event vs broadcastchannelbroadcastchannel browser supportbroadcastchannel safaribroadcastchannel typescriptpostmessage broadcastchannelsame origin messagingbroadcastchannel pingbroadcastchannel round tripbroadcastchannel chatmultiple tabs coordinationshared worker vs broadcastchannelbroadcastchannel closedbroadcastchannel onmessagehow to use broadcastchannelmdn broadcastchannelbroadcastchannel polyfillbroadcastchannel reactcross window messagingiframe parent communication broadcastchannelweb worker broadcastchannelservice worker broadcastchannelbroadcastchannel messageeventbroadcastchannel nametest broadcastchannel onlinebroadcastchannel playgroundbroadcast channel labtab sync demoreal time tab syncbroadcastchannel securitycan broadcastchannel cross originbroadcastchannel example codetab communication javascriptbroadcast channel leadercross tab chat

More tools

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →