# Message Bus

While Polypane syncs all interaction events, there are some events we can't accurately sync:

*   Closed root web components, since they don't emit events beyond their own `shadowRoot`.
*   Events on `canvas` elements/where the exact x,y position is significant (transposing them won't always work, so we don't).

For these situations, you can use the Polypane Message Bus to communicate data to all other panes.

### Message Bus API

The Polypane Message Bus is available on `window.__PolypaneBus` and features three functions:

### `window.__PolypaneBus.send(channel, data)`

*   _channel_, string
*   _data_, any serializable javascript data (objects, strings, arrays)

Sends a message to all other panes.

### `window.__PolypaneBus.on(channel, callback)`

*   _channel_, string
*   _callback_, function
    *   _data_, the data sent

This adds a listener on `channel` that executes the `callback` function with the received data as only argument every time the `send` API is called in another pane.

The function returns a Symbol that you can store as a reference. You can add multiple listeners to a single channel.

### `window.__PolypaneBus.off(channel)`

*   _channel_, string or Symbol

Use this to turn off all the listeners on a `channel` when you use a string, or turn off a single listener if you use the Symbol returned by the `on` API.

### Use-cases

As mentioned at the top of this page, you can use this to sync state or events across panes for when these aren't already synced by Polypane.

You can sync DOM events, or their result, on closed web components so these can be tested across screen sizes quickly.

You can sync global game states between panes on change to keep e.g. canvas games in sync between panes while you test different devices.

Got a cool use case? [let us know!](/support/)

#### Only use the Message Bus in Polypane

There are various ways to [detect Polypane](/docs/detecting-polypane/), and of course the `__PolypaneBus` API won't be available elsewhere.

You can use this to selectively sync events only in Polypane, or to remove these calls from your code during a build step.

---

Polypane is the browser built for developers and designers — try it at https://polypane.app.