Modular JavaScript library for building interactive malleable HTML files with Hyperclay
npm install hyperclayjsA modular JavaScript library for building interactive malleable HTML files with Hyperclay. Load only what you need with automatic dependency resolution.
- šÆ 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
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.
`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';
`
| 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 |
| 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 |
| 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) |
| 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 |
| 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 |
| 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 |
| 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 |
| Module | Size | Description |
|--------|------|-------------|
| hyper-morph | 17.2KB | DOM morphing with content-based element matching |
Modules: save-core, snapshot, save-system, edit-mode-helpers, toast, save-toast, export-to-window, view-mode-excludes-edit-modules
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
Includes all available modules across all categories.
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
`
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();
`
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`)MIT Ā© Hyperclay
This project includes the following open-source libraries:
- HyperMorph - DOM morphing with content-based element matching (0BSD)
- Sortable.js - Drag-and-drop library (MIT)