# Live sync between tabs

> How changes another program makes reach an open HTML Clay page, and how tabs of the same file stay in step through the app's server.

Source: https://htmlclay.com/docs/live-sync/

This page covers the app's side of live updates: how a change on disk reaches the page you have open, and how two tabs of one file stay in step. Turning live sync on in a document is the ClayJS [live sync plugin](https://clayjs.com/docs/plugins/live-sync/) page.

## Another program changed the file

A text editor, Git command, sync client, or local agent can rewrite the file. HTML Clay waits until the bytes stop changing. It then versions the file and updates the open page in place, without a reload. Half-written files stay off screen, because an outside change is shown only after repeated reads return the same bytes. Your own save does not echo back, because the watcher suppresses the exact hash it just wrote.

Live sync is also how a program's edit reaches an open page.

## Two tabs can stay in step

When a document loads the ClayJS `sync` plugin, tabs of the same file stay in step through the server. Tabs in edit mode exchange unsaved DOM snapshots on the `live` lane. View-mode tabs follow the durable document on the `saved` lane, which the server updates after an accepted save or a settled file-system change. Identifiable dirty regions, the caret, and scroll position survive an incoming file change.

This works between tabs and windows on one machine. It is not multiplayer sync between computers.

The relay passes the same same-origin check as every other mutating route.

## Troubleshooting

- Nothing appears: check that the ClayJS script tag includes `sync`. Reload the tab after adding the plugin. Make sure you opened the file through HTML Clay.
- Your words in the note were replaced: the outside change affected the same words. Keep edits in separate parts.

## Where next

This guide covers one open page with manual saving; it leaves out working in several open tabs of one file and pages that use autosave.

A page can also send a request to a program on your computer. [Programs](https://htmlclay.com/docs/programs/) covers attaching a program and showing its answer. [Agent editing](https://htmlclay.com/docs/guide/let-a-program-edit/) walks through a page that asks a program to edit its file. The [wire reference](https://github.com/panphora/htmlclay/blob/main/docs/wire.md) documents the request protocol.