CMS

Hyperclay has a built-in CMS that turns any page into something a non-technical person can edit. You describe what counts as content with a single tag, add one button, and clicking it slides in an editing sidebar. As the editor types, the changes are written straight back into the page, and saving the page writes them into the file. There is no database, no admin backend, and no separate content store. The page is the content.

The mental model is a two-way loop with the page as the source of truth. The CMS reads a JSON object out of your page using rules you define, builds a form bound to that object, and writes every edit back onto the page as you make it.

Turn it on

The CMS ships in the smooth-sailing and everything presets of HyperclayJS, so on most apps it is already loaded. Use one of those presets:

<script src="https://cdn.jsdelivr.net/npm/hyperclayjs@latest/src/hyperclay.js?preset=smooth-sailing" type="module"></script>

If you build a custom feature list instead of a preset, add &features=hypercms.

Describe your content

Add one rules tag to the page. It is a small JSON map from a field name to a CSS selector, and it tells the CMS what on the page is editable.

Prefer not to hand-write this? See Let AI add it for you below.

<h1 class="title">My Site</h1>
<p class="tagline">The tagline goes here</p>
 
<script data-rules-name="cms" data-rules-version="1" type="application/json">
{
  "title": ".title",
  "tagline": ".tagline"
}
</script>

data-rules-version must be "1". The selector grammar is small:

Open the editor

Add a button that calls open(). The CMS builds the form from your rules and mounts it as a sidebar.

<button onclick="hyperclay.hypercms.open()">Edit content</button>

That is the entire integration. Every field in your rules becomes an input, and editing it updates the page live.

What editors see

Your button slides a panel in from the right. The page reflows to make room rather than covering content. The panel has a title, a close button, and a scrolling list of fields, one labeled control per rules field:

Edits are live: typing updates the page instantly. Removing a list item confirms first.

Nothing saves on its own. The close button keeps your edits; save with Cmd+S as usual. Closing clears ?cms=true from the URL so reload or share does not reopen the editor.

Editable lists

For a list of repeating items, use the [selector, shape] form. The editor gets add, remove, and drag-to-reorder controls automatically.

<ul class="posts">
  <li class="post">
    <h3 class="post-title">First post</h3>
    <p class="post-body">Hello world.</p>
  </li>
</ul>
 
<script data-rules-name="cms" data-rules-version="1" type="application/json">
{
  "posts": [".post", { "heading": ".post-title", "body": ".post-body" }]
}
</script>

So that a list can grow from empty, mark a hidden seed element with cms-template. The CMS ignores it when reading and writing data, and clones it when the editor adds the first item.

<ul class="posts">
  <li class="post" cms-template hidden>
    <h3 class="post-title"></h3>
    <p class="post-body"></p>
  </li>
</ul>

Saving, and what gets saved

This is the important part. The CMS only changes the live page. It never saves on its own. You save the page the normal Hyperclay way, with Cmd+S or autosave, and that writes the current DOM into the .html file.

The sidebar itself is never part of the saved file. It marks itself so the save system skips it, and the editing state is stripped on the way out, so the file on disk only ever contains your content. Open the saved file anywhere and it is just clean HTML with your latest edits baked in.

Undo and live editing come for free

Because the CMS edits the real page, the rest of the platform cooperates with it automatically:

• Undo works on CMS edits. Each add, remove, and reorder is a labeled, undoable step, and Cmd+Z steps back through them. See Undo and Redo.
• Live-sync keeps the form fresh. If the page changes from another device or collaborator, the sidebar re-syncs to match, and it preserves whatever field you are currently typing in.

Customize the form

The default inputs are generated for you, so you usually write no form markup at all. When you want control over how a field or a card renders, add a <template> keyed to it:

<template data-hcms-tpl="posts">
  <div class="hcms-card">
    <div class="hcms-card-fields"></div>
    <button data-hcms-action="remove">Delete post</button>
  </div>
</template>

Inside a template, mark the slots the CMS fills: data-hcms-field, data-hcms-label, and data-hcms-action="add | remove | move-up | move-down", plus .hcms-card-fields for an object array. Constrain a list with attributes on the template:

Your own custom inputs (a rich text widget, a color picker) work with no CMS API: drop the element inside a template and your existing init code wakes it up. The CMS only moves text and attributes in and out of the DOM, it does not need to know the element is special.

Let AI add it for you

Instead of writing the rules tag by hand, let Hyperclay write it. In a site’s three-dot menu, click Add CMS to page (AI) (subscribers only). An AI model reads the page, separates human content from app machinery, and writes the rules tag, editable markers, and loader script into it.

It runs in the background for a minute or two, showing Adding CMS…, then a toast reports the result:

Regenerate CMS (AI) redoes the page after a confirm, replacing the previous AI run but keeping any hand-written cms-* markup. Open with CMS opens it with the sidebar up, the same ?cms=true entry point as above.

Outside Hyperclay

The CMS is also a standalone package, @panphora/hyper-cms. Its one hard dependency is HyperclayJS’s Mutation utility, which is present whenever you load HyperclayJS.

import { cms } from '@panphora/hyper-cms'
cms.open()

Outside a Hyperclay app there is no automatic save, so persisting the edited HTML is up to you.