HTML Clay
  1. HTML Clay
  2. Guide
  3. Making malleable documents

Making malleable documents

HTML Clay runs malleable documents built with ClayJS. What ClayJS does, where to learn it, and how to bring your own file into HTML Clay.

You make malleable documents with ClayJS, and the ClayJS docs are the place to learn it. This site covers the HTML Clay desktop app, not how to build documents. When you want to make your own malleable document, go to the ClayJS docs.

What ClayJS does#

ClayJS is the free, open-source browser library that turns one HTML file into a malleable document. Every malleable document is built with it.

  • One script tag: Add a single script tag to a plain HTML file with no build step.
  • Edits in place and saves to its host: Make elements editable, persist form inputs and DOM state, strip temporary editing controls before saving, and write clean HTML back to its host.
  • Live sync: Sync changes in real time across open browser tabs, people, and local tools.
  • Plugins: Opt into plugins such as the CMS, richclay for rich text, sortable lists, undo, and AI editing.
  • Works anywhere: Run the same HTML file in HTML Clay, Hyperclay, Hyperclay Local, or on your own server.

Learn ClayJS#

ClayJS docsRead the full developer documentation and reference for ClayJS.ClayJS quick startBuild your first self-saving HTML file in a few minutes.A document explained line by lineSee a complete ClayJS document explained line by line.

Running your file in HTML Clay#

Once you have an HTML file built with ClayJS, name the file with the .htmlclay extension and double-click it. HTML Clay serves the file in your browser and saves every edit back to that file on disk.