A copy-and-paste guide

Give your static HTML page a CMS

The fastest way to give your static HTML file an editable interface.

Free CMS · No account needed · HTML Clay 1.9.0+

01 Copy this into a file

Install HTML Clay and launch it. Make a folder inside your home folder, then save the code below as plain text named profile.htmlclay.

Put a JPEG photo named portrait.jpg beside it. You now have a personal page with editable text, a link, and a photo.

profile.htmlclay HTML 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My profile</title>
  <style>
    body { max-width: 32rem; margin: 3rem auto; padding: 0 1.5rem;
      font: 1.2rem/1.5 system-ui; color: #20352b; background: #f5f4ed; }
    img { width: 8rem; height: 8rem; object-fit: cover; border-radius: 50%; }
    h1 { line-height: 1.1; }
    a { color: inherit; }
  </style>
</head>
<body>
  <img class="photo" src="portrait.jpg" alt="My portrait" data-hcms-crop="1:1">
  <h1 class="name">Alex Rivera</h1>
  <p class="bio">Making small things for the web.</p>
  <a class="website" href="https://example.com">My website</a>

  <script data-rules-name="cms" data-rules-version="1" type="application/json">
  {
    "name": ".name",
    "bio": ".bio",
    "photo": ".photo@src",
    "website": ".website@href"
  }
  </script>
  <script src="https://clayjs.com/v1/clay.js?plugins=cms,indicator"></script>
</body>
</html>

02 Change something and it persists.

Double-click profile.htmlclay. If asked, choose Trust this folder. In Edit content, open the arrow and choose On the page. Click the name or bio and type.

Use the photo’s handle to upload and crop. Wait for the progress bar to disappear and your photo to appear. The link’s pencil changes its destination.

Press Cmd+S or Ctrl+S and wait for Saved. Reload: your changes remain. Reopen the file in your text editor to find your new words in the HTML.

Keep HTML Clay running while you edit. When you move the file, take its assets-profile folder too. If saving fails, keep the tab open and check the help below.

03 Use your own page

Make a .htmlclay file (it behaves just like a regular .html file) and keep its assets alongside it. Copy in the two script tags, then add selectors to match its content. Open it through HTML Clay.

"bio": ".bio" edits text; @src edits an image; @href edits a link.

Your HTML, with an editor

You have a static HTML file and want to change it. Add a few selectors and get a content editor sidebar in about a minute. It’s all frontend code, and your edits stay in the HTML.

Keep the scripts and assets local to work offline with HTML Clay. Or host the page on Hyperclay, give your colleagues edit access, and share the editing experience in a live collaborative document.

If something does not work
  • No editor? Use HTML Clay 1.9.0 or newer and open the .htmlclay file from your file manager. An ordinary browser tab cannot save it.
  • No On the page option? These instructions use HyperCMS 0.11.0. An older bundle may offer only the sidebar, which edits the same fields.
  • A linked file is read-only? Open it from your file manager. To edit linked files too, choose Trusted Folders → Trust a Folder in HTML Clay. Keep the example folder inside your home folder.
  • A photo or field is missing? Check that portrait.jpg sits beside the file and each selector matches an element. Keep uploaded images in assets-profile.
  • An upload failed? Resolve the error below its control, then choose the image again. A preview alone does not mean the upload finished.
  • Couldn’t save? Keep the tab open. Confirm HTML Clay is running and follow any permission or conflict message before retrying. Do not reload unsaved changes.
Optional: autosave, lists, and AI setup

Autosave: first save and wait for Saved. Close the tab, reopen the latest file in your editor, and change its opening tag to <html lang="en" autosave>. Save and reopen through HTML Clay.

More fields: the reference covers lists and includes a prompt for your coding agent.

Hosted pages: on a paid Hyperclay plan, Add CMS with AI generates the rules. Review the fields it creates. See the hosted setup.