demo · v140
Cross-tab clipboard coordination
The clipboardchange event fires only in the tab that has the system clipboard's focus. This demo uses a BroadcastChannel to relay those events to every other tab on the same origin — showing the coordination pattern a remote desktop or collaborative editor would use to keep all views in sync.
Your browser doesn't expose clipboardchange on navigator.clipboard. The simulated broadcast via BroadcastChannel still works in both panes below so you can see the cross-tab coordination pattern.
Tab A — clipboard source
Not watching
Type here, then copy. A clipboardchange event fires and is broadcast to all tabs.
Events fired:
No events yet.
Tab B — remote viewer
Not watchingThis panel simulates a second tab on the same origin. It listens to the BroadcastChannel and mirrors any clipboard update Tab A relays.
Broadcast received:
No messages yet.
Tab A (this page) Tab B (same origin)
───────────────────────────── ─────────────────────────────
navigator.clipboard BroadcastChannel("clipboard-sync")
.addEventListener("clipboardchange") .onmessage = (e) => {
.read() → { types, text } mirror(e.data.text);
→ bc.postMessage({ text, types, ts }) updateLatency(Date.now() - e.data.ts);
}
why BroadcastChannel?
The clipboardchange event only fires in the currently focused tab. Other tabs on the same origin have no direct way to know the clipboard changed. BroadcastChannel fills the gap: Tab A relays the change notification (and the clipboard text, if permission allows reading it) to every tab listening on the same channel name. The receiving tab can then re-read the clipboard or display the forwarded content.
This is the core of the remote desktop / collaborative editor use case: clipboard sync across windows without polling, driven by a real browser event.