HyperclayJS

A modular JavaScript library for building interactive malleable HTML files with Hyperclay. Load only what you need with automatic dependency resolution.

Features

- 🎯 Modular Design - Pick exactly the features you need
- 🚀 Self-detecting Loader - Automatic dependency resolution from URL params
- 📦 Tree-shakeable - Optimized for modern bundlers
- 🎨 Rich Feature Set - From basic save to advanced UI components
- 💪 Zero Dependencies - Core modules have no external dependencies
- 🔧 Visual Configurator - Interactive tool to build your custom bundle

Quick Start

$3

The self-detecting loader reads URL parameters and automatically loads the requested features with all dependencies.

Destructure directly from the import:

``html

`

Or with custom features:

`html

`

Note: Presets include export-to-window by default, which also exports to window.hyperclay. Omit it from custom features if you only want ES module exports.

$3

`bash
npm install hyperclayjs
`

`javascript
// Import specific modules
import { savePage } from 'hyperclayjs/core/savePage.js';
import toast from 'hyperclayjs/ui/toast.js';

// Or use presets
import 'hyperclayjs/presets/standard.js';
`

Available Modules

$3

| Module | Size | Description |
|--------|------|-------------|
| autosave | 1.4KB | Auto-save on DOM changes |
| edit-mode | 1.8KB | Toggle edit mode on hyperclay on/off |
| edit-mode-helpers | 7.5KB | Admin-only functionality: [edit-mode-input], [edit-mode-resource], [edit-mode-onclick] |
| option-visibility | 7.8KB | Dynamic show/hide based on ancestor state with option:attribute="value" |
| persist | 2.4KB | Persist input/select/textarea values to the DOM with [persist] attribute |
| save-core | 8.9KB | Basic save function only - hyperclay.savePage() |
| save-system | 13.4KB | CMD+S, [trigger-save] button, savestatus attribute |
| save-toast | 0.9KB | Toast notifications for save events |
| snapshot | 10.8KB | Source of truth for page state - captures DOM snapshots for save and sync |
| tailwind-inject | 1.4KB | Injects tailwind CSS link with cache-bust on save |
| unsaved-warning | 1.3KB | Warn before leaving page with unsaved changes |

$3

| Module | Size | Description |
|--------|------|-------------|
| ajax-elements | 2.6KB | [ajax-form], [ajax-button] for async form submissions |
| dom-helpers | 6.2KB | el.nearest, el.val, el.text, el.exec, el.cycle |
| event-attrs | 4.6KB | [onclickaway], [onclickchildren], [onclone], [onpagemutation], [onrender] |
| input-helpers | 3.9KB | [prevent-enter], [autosize] for textareas |
| onaftersave | 1KB | [onaftersave] attribute - run JS when save status changes |
| sortable | 3.4KB | Drag-drop sorting with [sortable], lazy-loads ~118KB Sortable.js in edit mode |

$3

| Module | Size | Description |
|--------|------|-------------|
| dialogs | 7.7KB | ask(), consent(), tell(), snippet() dialog functions |
| the-modal | 21.5KB | Full modal window creation system - window.theModal |
| toast | 15.9KB | Success/error message notifications, toast(msg, msgType) |

$3

| Module | Size | Description |
|--------|------|-------------|
| cache-bust | 0.6KB | Cache-bust href/src attributes |
| cookie | 1.4KB | Cookie management (often auto-included) |
| debounce | 0.4KB | Function debouncing |
| mutation | 13.5KB | DOM mutation observation (often auto-included) |
| nearest | 3.4KB | Find nearest elements (often auto-included) |
| throttle | 0.8KB | Function throttling |

$3

| Module | Size | Description |
|--------|------|-------------|
| all-js | 14.4KB | Full DOM manipulation library |
| dom-ready | 0.4KB | DOM ready callback |
| form-data | 2KB | Extract form data as an object |
| style-injection | 4.2KB | Dynamic stylesheet injection |

$3

| Module | Size | Description |
|--------|------|-------------|
| copy-to-clipboard | 0.9KB | Clipboard utility |
| query-params | 0.3KB | Parse URL search params |
| slugify | 0.7KB | URL-friendly slug generator |

$3

| Module | Size | Description |
|--------|------|-------------|
| file-upload | 10.7KB | File upload with progress |
| live-sync | 11.5KB | Real-time DOM sync across browsers |
| send-message | 1.3KB | Message sending utility |

$3

| Module | Size | Description |
|--------|------|-------------|
| hyper-morph | 17.2KB | DOM morphing with content-based element matching |

Presets

$3

Essential features for basic editing

Modules: save-core, snapshot, save-system, edit-mode-helpers, toast, save-toast, export-to-window, view-mode-excludes-edit-modules

$3

Standard feature set for most use cases

Modules: save-core, snapshot, save-system, unsaved-warning, edit-mode-helpers, persist, option-visibility, event-attrs, dom-helpers, toast, save-toast, export-to-window, view-mode-excludes-edit-modules

$3

All available features

Includes all available modules across all categories.

Lazy-Loaded Modules

Some modules with large vendor dependencies are lazy-loaded to optimize page performance:

| Module | Wrapper Size | Vendor Size | Loaded When |
|--------|-------------|-------------|-------------|
| sortable | ~3KB | ~118KB | Edit mode only |

How it works:
- The wrapper module checks if the page is in edit mode (isEditMode)
- If true, it injects a
`

Module Creation

Each module should be a self-contained ES module:

`javascript
// features/my-feature.js
import dependency from '../utilities/dependency.js';

export default function myFeature() {
// Feature implementation
}

// Auto-init when module is imported
myFeature();
`

Migration from Monolithic Script

$3


`html

`

$3

`html



`

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Make your changes
4. Run npm run generate:deps to update the dependency graph
5. Test your changes with npm run dev
6. Commit your changes (git commit -m 'Add amazing feature')
7. Push to the branch (git push origin feature/amazing-feature`)
8. Open a Pull Request

License

MIT © Hyperclay

$3

This project includes the following open-source libraries:

- HyperMorph - DOM morphing with content-based element matching (0BSD)
- Sortable.js - Drag-and-drop library (MIT)

Links

- Documentation
- Examples
- Configurator
- GitHub Issues