Intro to HyperclayJS

HyperclayJS is the JavaScript library that turns a plain HTML file into a self-saving, editable app. One script tag gives your HTML file the ability to overwrite itself, toggle between admin and visitor modes, and persist DOM changes automatically.

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

What It Does

• Automatic save handling: Detects DOM changes and enables saving
• Edit mode management: Shows/hides editing UI based on permissions
• Attribute processing: Handles all special Hyperclay attributes (edit-mode-contenteditable, persist, sortable, onrender, onbeforesave, etc.)
• DOM enhancements: Adds nearest, val, text, and exec helpers to every element
• UI helpers: Built-in dialogs (ask, consent, toast) for user interaction
• all.js: A jQuery-like utility for selecting and manipulating elements

Quick Taste

Make any element editable for owners:

<h1 edit-mode-contenteditable>Click to edit this title</h1>

Persist form values directly in the HTML:

<input persist type="text" name="username" value="John">

Navigate the DOM with semantic helpers:

<button onclick="this.nearest.task.remove()">Delete Task</button>
<button onclick="this.val.status = 'complete'">Mark Complete</button>

Show UI only for editors:

<button option:editmode="true" trigger-save>Save Changes</button>

For the full API reference, attribute docs, and examples: