A 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:

<script type="module">
  const { toast, savePage } = await import('https://cdn.jsdelivr.net/npm/hyperclayjs@1/src/hyperclay.js?preset=standard');
  toast('Hello!');
</script>

Or with custom features:

<script type="module">
  const { toast, ask } = await import('https://cdn.jsdelivr.net/npm/hyperclayjs@1/src/hyperclay.js?features=toast,dialogs');
</script>

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.

npm install hyperclayjs

// 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';

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

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

All available features

Includes all available modules across all categories.

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

How it works:

• The wrapper module checks if the page is in edit mode (isEditMode)
• If true, it injects a <script save-remove> tag that loads the vendor script
• If false, nothing is loaded - viewers don't download the heavy scripts
• The save-remove attribute strips the script tag when the page is saved

This means:

• Editors get full functionality when needed
• Viewers never download the heavy vendor scripts
• Saved pages stay clean with no leftover script tags

Explore features and build your custom bundle with our interactive configurator:

npm run dev

This will:

1. Generate fresh dependency data
2. Start a local server on port 3535
3. Open the configurator in your browser

The configurator shows:

• Real-time bundle size calculation
• Automatic dependency resolution
• Generated CDN URL
• Feature descriptions and categories

hyperclayjs/
├── hyperclay.js              # Self-detecting module loader
├── core/                     # Core hyperclay features
├── custom-attributes/        # HTML attribute enhancements
├── ui/                       # UI components (toast, modals, prompts)
├── utilities/                # General utilities (mutation, cookie, etc.)
├── dom-utilities/            # DOM manipulation helpers
├── string-utilities/         # String manipulation tools
├── communication/            # File upload and messaging
├── vendor/                   # Third-party libraries (Sortable.js, etc.)
├── scripts/                  # Build and generation scripts
└── starter-kit-configurator.html  # Interactive configurator

# Install dependencies
npm install

# Generate dependency graph
npm run generate:deps

# Start development server with configurator
npm run dev

# Build bundles
npm run build

# Run tests
npm test

The project uses Madge to automatically analyze dependencies and generate rich metadata:

npm run generate:deps

This creates module-dependency-graph.generated.json with:

• Complete dependency tree
• Actual file sizes
• Category assignments
• Preset configurations

The configurator dynamically loads this file to always show accurate information.

• Chrome 89+
• Firefox 89+
• Safari 15.4+
• Edge 89+

The loader uses ES modules with top-level await. Use await import() to ensure modules finish loading before your code runs.

// Manually save the page
hyperclay.savePage();

// Add save button
hyperclay.initHyperclaySaveButton(); // Looks for [trigger-save]

// Keyboard shortcut
hyperclay.initSaveKeyboardShortcut(); // CMD/CTRL+S

toast("Operation successful!", "success");
toast("Something went wrong", "error");

// Ask for input
const name = await ask("What's your name?");

// Get consent
const agreed = await consent("Do you agree to terms?");

// Show message
tell("Welcome to Hyperclay!");

<!-- AJAX form submission -->
<form ajax-form="/api/submit">
  <input name="email" type="email">
  <button>Submit</button>
</form>

<!-- Auto-resize textarea -->
<textarea autosize></textarea>

<!-- Drag-drop sorting -->
<ul sortable>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<!-- Run code when clicked away -->
<div onclickaway="console.log('Clicked outside')">
  Click outside this div
</div>

<!-- Persist input/select/textarea values -->
<input type="text" name="username" persist>

<!-- Only visible/editable in edit mode -->
<div contenteditable editmode:contenteditable>Admin can edit this</div>
<input type="text" viewmode:disabled>
<script editmode:resource>console.log('Admin only');</script>

Each module should be a self-contained ES module:

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

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

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

<script src="/js/old-hyperclay.js"></script>

<!-- Use preset -->
<script src="/js/hyperclay.js?preset=standard" type="module"></script>

<!-- Or specific features -->
<script src="/js/hyperclay.js?features=save,edit-mode-helpers,toast" type="module"></script>

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

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)

• Documentation
• Examples
• Configurator
• GitHub Issues