# Malleable documents The tools you need to make a static HTML file behave like a Google Document: editable, auto-save, live sync, etc. [Get started](https://clayjs.com/docs/guide/quick-start/) [Send this to your agent](https://clayjs.com/docs/start/) [Get your script tag](https://clayjs.com/#configure) notes.html saved in your browser ### My notes This note is the whole app. No database, no build step. Everything you type here is saved into the file itself. Click the heading or the note and type. Select text to format it. Then save, refresh the page, and it's still there. ```html

My notes

``` That's a complete app. Type into the heading, hit Save, refresh: your words are still there. The file saved itself. Try the interactive demos, then follow the guide to build your own HTML file that edits and saves itself: [Get started](https://clayjs.com/docs/guide/quick-start/). “I love simple solutions to problems that modern webdev has made unnecessarily complicated.” kami · developer ## Make it save Keep your edits in the HTML file itself. ClayJS sends the document to its host, which writes the updated file. Choose when to save, or turn on autosave. [See how saving works](https://clayjs.com/docs/guide/saving/). ## Know it saved Show when a save is in progress, when it succeeds, and when something needs attention. Use ClayJS save status to build feedback that fits your page. [See save status and events](https://clayjs.com/docs/guide/saving/#save-status). notes.html saved in your browser Try both outcomes: ## Make it a document Type directly into a heading, format a note, or fill in a form. ClayJS can save the text and field values as part of the document. [Build your first editable file](https://clayjs.com/docs/guide/quick-start/). meeting.html saved in your browser Meeting notes for Tuesday… ## Saved files have a lifecycle Three things come up in almost every malleable file, usually in this order. Open the one you're facing. I shouldn't have to press Save.autosave Put `autosave` on the `` element and clayjs saves for you: edits settle for a moment, then a save fires. It's debounced and throttled, so rapid typing never spams the server. ```html ``` journal.html simulated Type here and just stop. It saves on its own. It's open in two places and the copies fight.live sync Check _“sync edits across open copies”_ in the [configurator](https://clayjs.com/#configure). Edits then flow into every open copy of the file, morphing the page in place: no reloads, and nobody loses their cursor. It's off by default: it holds a connection open, and you don't need that until you have this problem. plan.html · your laptop simulated Type in either copy… plan.html · your phone simulated Type in either copy… Visitors can see my edit controls.edit mode Your first malleable file can keep its controls exposed; that's fine. When you share it, mark the owner-only parts and clayjs strips or disables them for everyone else. The server decides who the owner is. ```html

Only the owner can edit this

``` recipe.html simulated ### Sourdough, third attempt More water, less patience. Visitors won't see these buttons or the dashed underline. ## Control what gets saved Keep temporary controls and status displays out of the saved document while preserving your content. Regions let you choose how each part of the page participates in saving. [Explore regions](https://clayjs.com/docs/regions/). ## What does your file need? Check what applies. The script tag updates as you go; plugins load only in the browser, only when checked. SavingThe core. Always on. Rich text editingThe `editable` attribute: bold, lists, links. On by default. A built-in save indicatorA small ready-made status chip, if you'd rather not style your own. Sync edits across open copiesLive sync between tabs, devices, and collaborators. Live JSON data for gamesA JSON tag becomes a shared object that players change in real time. Drag items to reorderThe `sortable` attribute for lists and boards. Undo / redo⌘Z that understands the whole document, not just text fields. AI editingSelect text, press ⌘J, and ask your AI agent for a change. Needs HTML Clay or Hyperclay Local. A content sidebar (CMS)Edit-in-place panel for the file's content. Needs a two-line setup, shown below. Your script tag **CMS setup:** add one more tag naming the parts of your page that count as content. The sidebar builds itself from it: ```html ``` Each entry is a field: a name, then the selector it edits. Open the sidebar with `?cms=true` on the URL. The same tag can power the [JSON data API](https://clayjs.com/docs/plugins/) too. Need more? Reactive templates, JSON data in and out, toasts and dialogs, DOM helpers: those are separate libraries with their own script tags, on [Plugins](https://clayjs.com/docs/plugins/) and [Advanced](https://clayjs.com/docs/regions/). ## Your file is yours It runs on [hyperclay.com](https://hyperclay.com/), on your own machine with [Hyperclay Local](https://hyperclaylocal.com/) or [HTML Clay](https://htmlclay.com/), or against [about 20 lines of your own server code](https://clayjs.com/docs/endpoint/). Download it anytime; it's just HTML. The fastest way to try a malleable file with zero setup is a free account on [hyperclay.com](https://hyperclay.com/).