← Home
Use HyperclayJS
Build a version of HyperclayJS that fits your workflow
Quick Presets
Minimal (23KB)
Standard (50KB)
Everything (220KB)
Core Features
Essential functionality
Save Core
Basic save function only `hyperclay.savePage` - call yourself, handle notifications
3KB
Save System
Full save: save button, keyboard shortcut, auto-save, change tracking
3KB
Admin Features
Hides admin inputs, admin scripts, admin contenteditable, admin onclick for regular viewers
10KB
Form Persistence
Persist input/select/textarea values to the DOM with [persist] attribute, so they're saved
1.4KB
Option Visibility
Dynamic show/hide based on page state with `option:attribute="value"`
4.4KB
Custom Attributes
HTML enhancements
Event Attributes
[onclickaway], [onclone], [onpagemutation], [onrender]
2.7KB
AJAX Elements
[ajax-form], [ajax-button] for async form submissions
1.8KB
Sortable
Drag-drop sorting with [sortable], includes Sortable.js
118KB
DOM Helpers
el.nearest, el.val, el.text, el.exec, el.cycle
5.3KB
Input Helpers
[prevent-enter], [autosize] for textareas
1KB
UI Components
User interface elements
Dialog Functions
ask(), consent(), tell(), snippet() functions
7.5KB
Toast Notifications
Success/error message notifications, `toast(msg, msgType)`
7.3KB
Modal System
Full modal window creation system, access `window.theModal`
18.8KB
Configuration Summary
Features Selected:
0
Total Size:
0KB
Selected Features:
Add to your page:
Export to window
Attach modules to window and window.hyperclay
Skip edit-only in view mode
Don't load edit-only modules for non-admins
COPY
Module Difficulty
Beginner
—
Safe to include, does nothing unless you use it
Intermediate
—
Powerful but has gotchas:
Autosave
— triggers saves from DOM changes, can cause infinite loops
Tailwind Inject
— only runs on save, not live
Advanced
—
For power users building complex apps:
Live Sync
— requires understanding the full system, skip for simple sites