Live updates

Your task list is open in a tab. An agent changes a task in todo.htmlclay, and the new words appear on the page. You keep typing in another part of the page. Your unsaved edits stay, along with your cursor and scroll position.

While a tab that loads the ClayJS sync plugin is open, HTML Clay watches the file on disk. When the file changes, HTML Clay sends the new HTML to the open tabs. ClayJS matches elements and merges the new HTML into the page without a reload. HTML Clay also saves each detected outside change as a version. To find an earlier version, open Backups in HTML Clay's tray menu.

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. Get started 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:

<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:

<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.

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 covers attaching a program and showing its answer. Agent editing walks through a page that asks a program to edit its file. The wire reference documents the request protocol.