Hyperclay Local
  1. Hyperclay Local
  2. Guide
  3. Making malleable documents

Making malleable documents

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

You make malleable documents with ClayJS, and the ClayJS docs are the place to learn it. This site covers the Hyperclay Local desktop app and folder sync, not how to author documents. When you want to build 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: Load ClayJS in any HTML file with a single script tag.
  • Edits in place and saves to its host: Edit elements inline, persist form controls and DOM state, strip temporary editing controls on save, and write the updated HTML back to its host.
  • Live sync: Keep open browser tabs, people, and local tools in sync as the document changes.
  • Plugins: Add plugins such as the CMS, richclay rich text, sortable lists, undo, uploads, and AI editing.
  • Works anywhere: Use the same file in Hyperclay Local, HTML Clay, Hyperclay, or on your own server.

Learn ClayJS#

Serving your file in Hyperclay Local#

Once you have a ClayJS file, put it in your Hyperclay Local folder. Hyperclay Local serves your personal folder at localhost:4321 (and in the workspace window) and saves every change back to the file on disk.

When opened inside the workspace window, documents can load the bundled offline runtime. If you want an HTML file that runs in any browser with no network connection, download the standalone ClayJS build (clay.standalone.js) and place it next to your HTML file instead of loading from the CDN.