BroadcastChannel — interactive playground

<div class="pg">
    <h1 class="pg-title">📡 BroadcastChannel live</h1>
    <p class="pg-sub">
      Two simulated browser tabs — both subscribed to the same
      <code>BroadcastChannel('demo')</code>. Type a message in Tab A and watch it
      arrive in Tab B in real time. The sender never receives its own message.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Send a message between tabs</div>
      <div class="tabs-wrapper">
        
        <div class="tab-sim">
          <div class="tab-bar">
            <div class="tab-dot red"></div>
            <div class="tab-dot amber"></div>
            <div class="tab-dot green"></div>
            <span class="tab-title">Tab A — sender</span>
          </div>
          <div class="tab-body">
            <div class="label" style="margin-bottom:6px">Message to broadcast</div>
            <div class="send-row">
              <input type="text" id="msgInput" placeholder="e.g. LOGOUT or cart updated" maxlength="80" />
              <button class="btn primary sm" id="sendBtn">Send</button>
            </div>
            <div style="margin-top:10px">
              <div class="label" style="margin-bottom:4px">Quick scenarios</div>
              <div class="btn-row" style="flex-wrap:wrap;gap:6px">
                <button class="btn sm" data-preset='{"type":"LOGOUT"}'>Logout</button>
                <button class="btn sm" data-preset='{"type":"CART_UPDATED","count":3}'>Cart +1</button>
                <button class="btn sm" data-preset='{"type":"THEME_CHANGED","theme":"dark"}'>Dark mode</button>
                <button class="btn sm" data-preset='{"type":"NOTIFICATION","text":"New message"}'>Notify</button>
              </div>
            </div>
            <div id="sentBadge" class="event-badge none" style="margin-top:10px">no messages sent yet</div>
          </div>
        </div>

<div class="tab-sim">
          <div class="tab-bar">
            <div class="tab-dot red"></div>
            <div class="tab-dot amber"></div>
            <div class="tab-dot green"></div>
            <span class="tab-title">Tab B — receiver</span>
          </div>
          <div class="tab-body">
            <div class="label" style="margin-bottom:6px">Received messages</div>
            <div class="msg-log" id="msgLog">
              <div class="empty">Waiting for messages from Tab A…</div>
            </div>
            <p class="hint" style="margin-top:8px">
              Tab B called
              <code>channel.onmessage = (e) =&gt; …</code> — it gets every message
              Tab A sends.
            </p>
          </div>
        </div>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> The code behind this demo</div>
      <div class="code">// Tab A — open a channel and send
const channel = new BroadcastChannel('demo');
channel.postMessage({ type: 'LOGOUT' });

// Tab B — same channel name, receives all messages
const channel = new BroadcastChannel('demo');
channel.onmessage = (event) => {
  console.log(event.data); // { type: 'LOGOUT' }
};

// Clean up when done
channel.close();</div>
      <p class="hint" style="margin-top:10px">
        Any tab, worker, or iframe on the same origin that opens a channel with the
        same name is part of the group. The sender never receives its own messages.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> BroadcastChannel vs the localStorage trick</div>
      <table class="vs-table">
        <thead>
          <tr>
            <th>Aspect</th>
            <th>localStorage + storage event</th>
            <th>BroadcastChannel</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="row-label">Sending</td>
            <td><code>localStorage.setItem(key, JSON.stringify(data))</code></td>
            <td><code>channel.postMessage(data)</code></td>
          </tr>
          <tr>
            <td class="row-label">Serialization</td>
            <td class="bad">Manual — must <code>JSON.stringify</code> and <code>JSON.parse</code></td>
            <td class="good">None — structured clone handles it</td>
          </tr>
          <tr>
            <td class="row-label">Cleanup</td>
            <td class="bad">Must <code>removeItem</code> immediately (triggers a second event)</td>
            <td class="good">No side effects — just send</td>
          </tr>
          <tr>
            <td class="row-label">Event filtering</td>
            <td class="bad">Must check <code>event.key</code> and <code>event.newValue</code></td>
            <td class="good">Only receives messages from the same channel name</td>
          </tr>
          <tr>
            <td class="row-label">Data types</td>
            <td class="bad">Strings only</td>
            <td class="good">Any structured-cloneable value (objects, arrays, Date, Map…)</td>
          </tr>
          <tr>
            <td class="row-label">Same-tab detection</td>
            <td class="bad">Sender receives its own events — must add a timestamp filter</td>
            <td class="good">Sender never receives its own messages</td>
          </tr>
        </tbody>
      </table>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">4</span> What you can send (structured clone)</div>
      <div class="code" id="cloneDemo">// ✅ All of these work with postMessage:
channel.postMessage({ type: 'UPDATE', count: 42 });     // object
channel.postMessage([1, 2, 3]);                          // array
channel.postMessage(new Date());                         // Date
channel.postMessage(new Map([['key', 'value']]));        // Map
channel.postMessage(new Set([1, 2, 3]));                 // Set

// ❌ These throw a DataCloneError:
channel.postMessage(() => {});          // functions
channel.postMessage(document.body);    // DOM nodes</div>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.