# live sync

> The live plugin for fast-changing shared state, and live updates from outside the page.

Source: https://clayjs.com/docs/plugins/live-sync/

The `live` plugin gives a JSON tag fast-changing shared state, and the `sync` plugin, off by default, is what brings outside file changes into the open page.

## clay.live

Mark a JSON tag with `clay="live"` and `clay.live(name)` gives you its data as an object. Change it like any object; every change becomes a small operation, and `add` makes counters that never lose a point to a player scoring at the same moment.

```html
<script type="application/json" merge="game" clay="live">{"score": 0, "players": {}}</script>
<script src="https://clayjs.com/v1/clay.js?plugins=sync,live"></script>
```

```js
const game = clay.live("game");
game.data.players.ana = { x: 0, y: 0 };
game.add("score", 1);
game.on("change", render);
```

Also `set`, `delete` and `update`, which groups several changes into one. It loads in view mode too.

## Turn on live updates

The `sync` plugin is not enabled by default.

You need HTML Clay on macOS, Linux or Windows, a text editor, and `todo.htmlclay` from [the JSON API guide](https://clayjs.com/json-api). [Get started](https://clayjs.com/docs/guide/quick-start/) covers installing HTML Clay.

Open `todo.htmlclay` through HTML Clay. In your text editor, add an editable note after the task list's closing `</ol>` tag. The list and note should look like this:

```html
<ol>
  <li class="todo" data-done="no">Buy milk</li>
  <li class="todo" data-done="no">Book tickets</li>
</ol>
<p contenteditable>Notes</p>
```

The `contenteditable` attribute lets you type into the note in the page.

Check the ClayJS script tag near the end of the file's body. Add `sync` if it is missing. If the tag already lists plugins, keep them and add `sync` to that comma separated list. For example, a tag with `indicator` becomes:

```html
<script src="https://clayjs.com/v1/clay.js?plugins=indicator,sync"></script>
```

Save the file and reload the tab once to load the plugin and note.

Now change "Book tickets" to "Book train tickets" in your text editor. Save `todo.htmlclay`. The task in the open page now reads "Book train tickets".

## Keep editing while changes arrive

When the exercise is done, the task reads "Book return tickets" and your note reads "Notes for the trip". Your cursor stays in the note, and the page keeps its scroll position.

Change the note to read "Notes for the trip" in the page. Ask an agent to change "Book train tickets" to "Book return tickets" in `todo.htmlclay`. Without an agent, make that change in your text editor and save the file. The task updates, and your note still reads "Notes for the trip".

Keep your edits and the agent's edits in separate parts of the page. If you both change the same words, the outside change replaces yours. Your replaced words are not in Backups because you never saved them.

With `autosave` on `<html>`, ClayJS saves both edits to the file for you. `todo.htmlclay` has no `autosave` attribute, so your note stays unsaved until you save the page.

Save the page with Cmd+S on macOS, or Ctrl+S on Linux and Windows. Open `todo.htmlclay` in your text editor. Find both "Book return tickets" and "Notes for the trip" in the file.