Quick start

In a few minutes, you will have an HTML file that edits itself in the browser and saves every change back into the file on your disk.

Install HTML Clay#

Get HTML Clay and install it on your computer. A browser cannot write to a file on disk, and HTML Clay is the small free desktop app that does.

Download a self-saving HTML file#

Download my-list.htmlclay, or copy it from the block below and save it as my-list.htmlclay. Save the file anywhere in your home folder (Downloads is fine) and double-click it; HTML Clay opens it in your browser.

<!DOCTYPE html>
<html lang="en" autosave>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My list</title>
<style>
  body {
    font: 17px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #2B2723; background: #F1EFEA;
    max-width: 30em; margin: 0 auto; padding: 7vh 22px 12vh;
  }
  h1 { font-size: 30px; line-height: 1.2; margin: 0 0 4px; }
  p.sub { color: #57514A; margin: 0 0 26px; }
  ul { list-style: none; margin: 0; padding: 0; }
  li { display: flex; align-items: center; gap: 12px; padding: 13px 2px; border-bottom: 1px solid #DDD8CE; }
  input[type=checkbox] { width: 19px; height: 19px; flex: none; accent-color: #3E6B52; cursor: pointer; }
  input[type=checkbox]:checked + span { color: #57514A; text-decoration: line-through; }
  :focus-visible { outline: 2px solid #3E6B52; outline-offset: 3px; }
</style>
</head>
<body>

<h1 editable="single-line">My list</h1>
<p class="sub">What I need to get done.</p>

<ul>
  <li><input type="checkbox" persist aria-labelledby="t1"> <span id="t1" editable="single-line">Buy oat milk</span></li>
  <li><input type="checkbox" persist aria-labelledby="t2"> <span id="t2" editable="single-line">Book the dentist</span></li>
  <li><input type="checkbox" persist aria-labelledby="t3"> <span id="t3" editable="single-line">Water the fig tree</span></li>
</ul>

<script src="https://clayjs.com/v1/clay.js"></script>
</body>
</html>

The file is plain HTML under the .htmlclay extension, so renaming it to .html opens it in any browser.

How the file saves itself#

Four parts of the markup make the page editable and self-saving:

• <script src="https://clayjs.com/v1/clay.js"></script> loads ClayJS at the end of <body>.
• autosave on <html> saves the whole document a moment after your edits settle.
• editable makes text typable in place, and editable="single-line" keeps the heading and task items on one line.
• persist writes a checkbox’s checked state into the HTML as an attribute.

Every save writes the whole document back into the same file on disk.

Edit the page and check the file#

Click any task name in the browser and type a new task name, then tick the second checkbox (“Book the dentist”). Wait two seconds for autosave to finish, then open my-list.htmlclay in your text editor. Your new words are right there in the file, and the checkbox you ticked now has a checked attribute. Because a browser writes bare attributes with empty values, that saved line of HTML looks like this:

<li><input type="checkbox" persist="" aria-labelledby="t2" checked=""> <span id="t2" editable="single-line">Book the dentist</span></li>

Uncheck the box, wait two seconds, and look at the file again to see the checked attribute removed.

Turn on live sync#

To turn on live sync, change the script tag at the bottom of my-list.htmlclay to load the sync plugin:

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

Save the file in your text editor, then reload the browser tab once. Now edit the task text in your text editor and save the file, and the open page updates in place without a reload. Duplicate the browser tab so two tabs show the file at once, and an edit in one tab appears in the other right away. This works between open tabs on one computer.

Next steps#

• A document, line by line: a complete document explained line by line.
• The model: how ClayJS works, from the start.
• Add ClayJS to a page: add ClayJS to a page you already have.
• Guide in Markdown: the whole guide as one Markdown file for your AI agent.