Skip to Content
DocumentationCMS

Make a page editable

Let’s start with a personal page: your name, a photo, and a link.

All you have to do to enable the CMS is a short description of which parts are content. Then Clay.js CMS gives you controls for editing them.

You can type directly on the page or use a sidebar. Both change the same HTML.

This guide uses HTML Clay  to save a file on your computer. You need the HTML Clay app, a text editor, an internet connection to load ClayJS (or download the standalone version), and a photo to upload to the page.

The CMS library is free to use. You do not need a Hyperclay hosting account.

(For rule syntax, JavaScript methods, and custom controls, see the CMS reference.)

Create the page

Install HTML Clay  and launch the app.

Create an example folder inside your home folder, such as Documents/personal-cms. Put a JPEG photo in the example folder and name it portrait.jpg. In your text editor, create profile.htmlclay beside it with this 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>

The rules tag maps labels to elements. "name": ".name" means the name field edits the element with class name. @src edits the image source, and @href edits the link destination. The CMS uses the content already in those elements.

Save it as plain text with the exact filename profile.htmlclay. Double-click the file to open it through HTML Clay. If the app asks about the example folder you created, choose Trust this folder.

Edit on the page

Find the floating Edit content control at the bottom right of the page. Open its arrow and choose On the page. If either is missing, see troubleshooting. Click the name or bio and type. To edit the website address, click the pencil beside the link and change the value in the popover. The visible link label stays “My website” because this example maps only its destination.

For a photo, click its edit handle and choose an image from your computer. You can reuse portrait.jpg to practice. The data-hcms-crop="1:1" attribute opens a square crop window. Confirm the crop. Keep the editor open until the progress bar disappears and the selected photo appears on the page, with no error below the upload control. A preview inside that control alone does not mean the upload has finished.

You can also choose In the sidebar from the edit menu. It presents the same fields together in a panel. Switching views keeps your page edits.

Save and check the file

Check that the page shows the text, link address, and photo you intended to change. Press Cmd+S on macOS or Ctrl+S on Windows or Linux. Wait for the small Saved status chip at the bottom right. If it says Couldn’t save or Offline, not saved, keep the tab open and resolve the error before trying again. Do not reload while a save is failing. Closing the editor alone does not save.

Reload the page. Each change you made should remain. Reopen profile.htmlclay in your text editor to read the saved file, discarding any stale editor buffer without saving it. Find the text you changed. It is now part of the HTML, alongside the rules and the page’s styles.

The editing popovers and sidebar are temporary controls. They are excluded from the saved page. Uploaded photos go into the host’s uploads folder (~/htmlclay/uploads/assets-profile/ on HTML Clay), and the HTML links them as /_/uploads/assets-profile/..., which keeps working when the page is renamed or moved. To take the page somewhere else with its photos, use Export as zip.

To enable autosave, first save any browser edits and wait for Saved. Close the browser tab and reopen the latest file in your text editor. Change its opening tag to <html lang="en" autosave>, save, then open the file through HTML Clay again. Subsequent edits save after a short pause. HTML Clay must still be running; autosave does not replace the save host.

Use your own page

For the same local workflow, make a copy of your page with the .htmlclay extension in a folder inside your home folder. Keep its local images, stylesheets, and other assets at the relative paths the page uses. Add the ClayJS script and a rules tag that points at the content you want to edit. Open the copy through HTML Clay and trust its folder when asked. If the page already loads ClayJS, add cms to that script’s plugin list rather than adding a second loader.

Start with a few fields and check each one. A rule for a heading should point at the heading, not a wrapper containing the whole page. For repeating links, cards, or gallery items, use a list rule from the reference.

An AI coding agent can help write the rules. The reference includes a configuration prompt. Review the result and try the fields before handing the page to someone else.

If something does not work

  • No Edit content button: confirm the filename ends in .htmlclay and open it through HTML Clay from your file manager. Then check the rules tag and ClayJS script. Opening the file directly as file:// does not provide the saving connection.
  • A linked page opens read-only: open its .htmlclay file from your file manager. To let linked .htmlclay pages in this example folder open editable too, use Trusted Folders in HTML Clay’s menu and choose Trust a Folder. Copy any file outside your home folder inside it, along with its assets, before opening it through the app.
  • The page says the app is out of date: update HTML Clay to 1.9.0 or newer, then reopen the file through the app. Changing the rules or forcing edit mode does not repair an older host’s saving connection.
  • No On the page option: your loaded CMS bundle may be an older sidebar-only version. Click Edit content to open its sidebar and edit the same fields there. The inline instructions target the two-view HyperCMS 0.11.0 build.
  • A field is missing or points at the wrong content: check its selector against the actual HTML. The sidebar can also expose fields that have no visible target on the page.
  • The photo does not load: confirm portrait.jpg sits beside profile.htmlclay. After an upload, keep the generated asset folder beside the page too.
  • An upload fails: resolve the error shown below the upload control, then choose the file again.
  • A save fails: keep the page open with your edits intact. Confirm HTML Clay is still running, then try Cmd+S or Ctrl+S again. Follow any permission or conflict message shown by the host; reloading is not a fix for an unsaved change.

Let AI add it for you

On Hyperclay’s hosted platform , a paid plan  adds a shortcut: choose Add CMS with AI from a page’s three-dot menu. It generates the configuration in the background. Wait for the result and review the fields before handing the page over. The free manual path above does not need this service. See AI configuration for how the two fit together.

Make a page malleable

For a hosted page without a runtime script, the same menu offers Make malleable on a paid plan. It adds ClayJS saving support but does not choose editable fields. Use Add CMS with AI to generate those rules, or configure them yourself.

Last updated on
CollectionsCMS Reference