Keep Multiple Browser Tabs in Sync with JavaScript


A web application can be open in several browser tabs at the same time.

The interesting part is that each tab normally has its own JavaScript state.

If something changes in one tab, the others don't automatically know about it.

Imagine, for example, a simple note editor. You open the application in two tabs and start typing in the first one.

Without additional logic, the second tab stays unchanged.

Fortunately, JavaScript provides a small browser API designed specifically for communication between different instances of the same application:

BroadcastChannel.


Creating a channel

Creating a channel requires only a name: 

const channel = new BroadcastChannel("notes");

Any other tab from the same origin can create a channel using the same name: 

const channel = new BroadcastChannel("notes");

Those tabs can now exchange messages.

There is no server involved, no WebSocket connection and no polling loop running in the background.

Sending a message to another tab

Let's use a very small example with a text area: 

<textarea id="note"></textarea>

Whenever its content changes, we can send the new value through our channel: 

const channel = new BroadcastChannel("notes");

const note = document.querySelector("#note");

note.addEventListener("input", () => {
  channel.postMessage({
    type: "note-updated",
    value: note.value
  });
});

The important line is: 

channel.postMessage({
  type: "note-updated",
  value: note.value
});

The postMessage() method sends a message to the other browser contexts listening on the same channel.

Now open the same page in a second tab.

The second tab still needs to listen for incoming messages.

Receiving updates

We can react to messages using the message event: 

channel.addEventListener("message", event => {
  if (event.data.type === "note-updated") {
    note.value = event.data.value;
  }
});

Now type something in the first tab.

The second tab receives the new value and updates its text area immediately.

The complete JavaScript is still very small: 

const channel = new BroadcastChannel("notes");

const note = document.querySelector("#note");

note.addEventListener("input", () => {
  channel.postMessage({
    type: "note-updated",
    value: note.value
  });
});

channel.addEventListener("message", event => {
  if (event.data.type === "note-updated") {
    note.value = event.data.value;
  }
});

Open two tabs, edit the note in one of them, and the other follows the changes.

Why send an object?

For such a small example, we could make the code even shorter: 

channel.postMessage(note.value);

and receive the value directly: 

channel.onmessage = event => {
  note.value = event.data;
};

That works perfectly well.

In a real application, however, sending an object gives us more flexibility: 

channel.postMessage({
  type: "note-updated",
  value: note.value
});

Later the same channel could carry other kinds of events: 

channel.postMessage({
  type: "note-deleted"
});

or: 

channel.postMessage({
  type: "settings-changed"
});

The channel effectively becomes a very small communication bus between different instances of your web application.

BroadcastChannel doesn't store anything

There is one important detail to understand:

BroadcastChannel is a communication API, not a storage API.

Suppose Tab A contains: 

Hello from Tab A

and Tab B is already open.

When Tab A broadcasts the new text, Tab B receives it.

But if you open a new Tab C afterward, that new tab does not automatically receive the previous message.

BroadcastChannel doesn't keep a history of messages.

If you need data to survive refreshes or newly opened tabs, combine BroadcastChannel with a persistence mechanism such as localStorage or IndexedDB.

For example: 

note.addEventListener("input", () => {
  localStorage.setItem("note", note.value);

  channel.postMessage({
    type: "note-updated",
    value: note.value
  });
});

Then initialize the text area when the page loads: 

note.value = localStorage.getItem("note") ?? "";

The two APIs now have different responsibilities: 

BroadcastChannel
→ live communication between open tabs

localStorage
→ persistence between page loads

This separation is often useful in real applications.

The same-origin rule

BroadcastChannel communication is restricted to the same origin.

For example, two tabs opened on: 

https://example.com

can communicate with each other.

A completely different website cannot simply join that application's "notes" channel.

This is exactly what you normally want when multiple instances of the same web application need to communicate.

Where can this be useful?

A synchronized note is only a simple example.

The same technique can be used whenever one tab needs to tell another that something changed.

For example: 

channel.postMessage({
  type: "cart-updated"
});

or: 

channel.postMessage({
  type: "data-invalidated"
});

or even: 

channel.postMessage({
  type: "document-saved",
  id: 123
});

Typical use cases include:

  • synchronizing application state
  • updating a shopping cart across tabs
  • informing other tabs that data has changed
  • propagating application settings
  • invalidating cached information
  • coordinating multiple instances of the same application

Closing the channel

When the channel is no longer needed, it can be closed: 

channel.close();

For a channel that exists for the entire lifetime of the page, you may never need to call this manually.

It becomes more useful when channels are created dynamically by components or temporary features.

Final thought

When two instances of a web application need to communicate, it is easy to immediately think about WebSockets, polling or server-side infrastructure.

Those technologies are useful when communication needs to travel through a server.

But if the problem is simply:

How can two tabs of the same web application tell each other that something changed?

the browser already provides a much smaller solution.

Create a channel: 

const channel = new BroadcastChannel("notes");

Send a message: 

channel.postMessage(data);

And listen for updates: 

channel.onmessage = event => {
  console.log(event.data);
};

Sometimes synchronizing browser tabs doesn't require additional infrastructure.

It only requires letting the tabs talk to each other.

Comments

Post a Comment

Popular posts from this blog

Building a Linear Regression PWA with React

Image
  From a CSV file to an interactive chart, entirely in the browser Linear regression is one of the simplest statistical techniques, but it is also a useful example of how data processing, mathematics and visualization can be combined in a modern web application. In this project, I built a Progressive Web App with React that allows users to upload a CSV file containing pairs of X and Y values. The application processes the data, calculates a linear regression model, displays the resulting equation and plots both the original observations and the regression line. The technology stack The application was created with React and Vite. A few focused libraries handle the main features: Papa Parse   reads and processes the uploaded CSV file. Chart.js   and   react-chartjs-2   display the dataset and regression line. KaTeX   renders the regression equation in mathematical notation. vite-plugin-pwa   adds the web app manifest, service worker and installable P...
Read more

Building AI Prompt Lab with Java 21, Spring Boot and React 19

Image
AI Prompt Lab is a full-stack application I built around a simple idea: managing reusable AI prompts should feel like working with any other structured application asset, rather than keeping them scattered across notes, text files or chat histories. The project combines Java 21, Spring Boot, React 19, TypeScript, PostgreSQL and OpenRouter in a compact architecture that covers the main concerns of a modern web application: authentication, authorization, persistence, external API integration and management of sensitive configuration. I deliberately kept the system relatively simple. The goal was not to introduce architectural patterns for their own sake, but to build a clean application where each technology has a clear responsibility. The project AI Prompt Lab provides an authenticated workspace where users can create, update, organize and reuse prompts for generative AI models. Each user has an independent prompt collection and can configure ...
Read more

Keep the Screen Awake with JavaScript: The Screen Wake Lock API

Image
Some web applications are designed to stay visible for a long time. Think about a workout timer, a cooking recipe, a presentation, a monitoring dashboard, or a web application being used as a control panel. There is one small problem: if the user doesn't interact with the device for a while, the operating system may dim or turn off the screen. Modern browsers provide a JavaScript API specifically designed for this situation: the Screen Wake Lock API. What does the Screen Wake Lock API do? The Screen Wake Lock API allows a web page to ask the browser to prevent the device's display from automatically turning off because of inactivity. The main JavaScript API is available through navigator.wakeLock . When the application requests a screen wake lock and the browser accepts the request, the display can remain active while the page is being used. This is especially useful for applications where the user needs to read...
Read more