Home
January 2026

Use the Broadcast Channel API to Communicate Between Windows

I'm building a Magic: The Gathering Deck Builderdb that uses two windows. I'm sending messages between them with the Broadcast Channel interface. It looks like this:

HTML

<bitty-7-0>
  <label>Message Sync
  <input 
    type="text" 
    class="message-line"
    data-send="send" 
  >
  </label>
</bitty-7-0>

Output

JavaScript

window.BittyClass = class {
  #channel
  
  bittyInit() {
    this.makeConnection();
  }

  makeConnection() {
    this.#channel = new BroadcastChannel("exampleChannel");
    this.#channel.addEventListener("message", (event) => {
      document.querySelector(".message-line").value = 
        event.data.text;
    });
  }

  send(ev, el) {
    this.#channel.postMessage({
      bittyid: ev.bittyId,
      text: ev.value
    });
  }
}

Notes

  • Open one or more additional copies of this window. You can type into and one of them and all of them will update.
  • I'm using bitty in this example since that's what I work with. Extracting the this.#channel lines and connecting them with a new event listener for the input gets things to work without it.
end of line

Footnotes

Currently in prototype, the deck builder will be here.