Skip to Content
DocumentationHow Hyperclay Works
Introduction

How Hyperclay Works

Modify the page. Save it. That's it.

Use jQuery, vanilla JS, or any DOM method to modify a page in response to user actions. When the page saves, your changes persist to the HTML file itself.

No backend to think about. The page is the app.

Core Concept

The Save Cycle

View Mode
Clean HTML, what visitors see
Edit Mode
Editing controls load for owners
Modify
Change anything through the UI
Save
Edit UI stripped, saved as clean HTML
cycle repeats

Two Faces of the Same File

  • View mode: what gets saved. Clean HTML, no editing UI.
  • Edit mode: loads on top for owners. Conditional scripts, styles, or attributes that add editing controls.
  • Visitors never see the edit UI. HyperclayJS has helpers for this.

A Document That Remembers

  • Every element and attribute you add persists across saves.
  • No API, no ephemeral views, the DOM is a persistent object that grows and evolves.
  • Need structured data? Use a <script type="application/json"> tag.

Saving Is Just an HTML String

  • POST the full HTML of the page to an endpoint with the page name.
  • That's the entire mechanism.

The Anatomy of a Malleable File

  1. Let users modify the page
  2. Store state in the DOM
  3. Strip edit controls so visitors see a clean page
  4. Save the HTML

The Result: A Powerful HTML File

  • Editable from anywhere
  • Portable & downloadable
  • Forkable & shareable
  • Its own web address
  • Live syncing across devices
  • Auto-generated JSON API

Want to learn more?

Read the Overview →
Last updated on