Hyperfixi Examples

Learn hyperscript patterns through interactive examples

45+ examples 12 categories 13 languages

Events & DOM

6 examples

Core event handling, DOM reads and writes, element visibility.

Hello World
Your first hyperscript. Learn basic event handling and DOM updates.
on click put
Show/Hide Elements
Control element visibility with simple show/hide commands.
show hide
Input Mirroring
Mirror input values to other elements in real-time.
on input value
Counter
Increment and decrement values with button clicks.
increment decrement
Send/Receive Events
Events are first class citizens. Send custom events between elements.
send on event
Tell Command
HyperCard-inspired syntax. Tell multiple elements what to do at once.
tell first/last

Toggle & State

2 examples

Toggle CSS classes, HTML attributes, and CSS properties.

Toggle Classes
Add and remove CSS classes to create interactive UI elements.
toggle classes
Toggle Attributes
Toggle HTML attributes (@disabled, @required) and CSS properties (*display, *visibility).
@attribute *property

Forms

2 examples

Input handling, validation, and form submission.

Form Validation
Client-side form validation with custom error messages.
validation forms
Partial Validation
Validate individual form fields as the user types.
validation inline

Dialogs

4 examples

Modal dialogs, native HTML dialog element, and smart toggle patterns.

Modal Dialog
Build accessible modal dialogs with keyboard support.
modal accessibility
Native Dialog
Use the native HTML dialog element with hyperscript.
dialog native
Dialog Toggle
Smart dialog toggle with modal and non-modal support.
toggle smart detection
Smart Element Toggle
Auto-detect and toggle dialog, details, summary, and select elements.
smart detection details

Navigation

3 examples

Tab UIs, SPA-style history management, and boosted links.

Tab Navigation
Create tabbed interfaces without JavaScript frameworks.
navigation event delegation
History Navigation
SPA-style URL management with push and replace commands.
push url replace url
Boosted Links
Automatic AJAX navigation for links and forms. Like hx-boost!
boosted AJAX forms

Fetch & Async

3 examples

API calls, dynamic content loading, and async patterns.

Fetch Data
Load data from APIs and display it dynamically.
fetch JSON
Async & Fetch
Be async with no extra code. No promises, async/await, or callbacks needed.
wait fetch
Infinite Scroll
Load more content as user scrolls to bottom.
intersection fetch

Animation

4 examples

CSS transitions, color cycling, view transitions, and fade effects.

Fade Effects
Smooth transitions using hyperscript's transition command.
transition opacity
Color Cycling
HSL color animation with pointer hold event loop.
repeat until transitions
Color Cycling (Simple)
Press and hold to cycle through colors. Event-driven loops with CSS transitions.
repeat until transition
View Transitions
Smooth CSS-powered page transitions using the View Transitions API.
view transitions animations

Drag & Drop

2 examples

Draggable elements and sortable lists with visual feedback.

Draggable Elements
Reusable drag behavior with custom events and parameters.
behavior measure
Sortable List
Drag-and-drop list reordering with visual feedback.
drag events dataTransfer

Swap & Morph

3 examples

Intelligent DOM swapping, morphing, and multi-target updates.

Swap & Morph
Intelligent DOM swapping with morphing. Preserves form state, focus, and scroll position.
swap morph
Morph Comparison
Compare different morphing strategies side by side.
morph comparison
Multi-Target Swaps
Update multiple page sections from a single response using partials.
hx-partial OOB updates

JS Interop

2 examples

JavaScript integration, clipboard operations, and browser APIs.

JavaScript Interop
Enhance existing code. Run inline JavaScript and pass parameters.
js...end interop
Clipboard Copy
Copy to clipboard button with visual feedback using the Clipboard API.
writeText clipboard

Reusable Behaviors

1 example

Pre-built, tree-shakeable behaviors for common UI patterns.

Behaviors Demo
Interactive demo of 11 behaviors: Draggable, Removable, Toggleable, Sortable, Resizable, Clipboard, AutoDismiss, Tabs, and more.
@lokascript/behaviors install

Multilingual

9 examples

Write hyperscript in your native language. Supports 13 languages with grammar transformation for proper word order.

Native Idiom Showcase
Live examples with native idioms. Select a language and see real hyperscript code.
native idioms live demos
Semantic-First Parser
Parse and translate hyperscript between any of 13 languages.
semantic bidirectional
Grammar Demo
Interactive demo showing hyperscript in 13 languages with live grammar transformation.
i18n grammar
Translation Playground
Live multi-language editor with semantic role visualization and shareable URLs.
playground live preview
Error Playground
Live diagnostics with CodeFix suggestions and automatic error correction.
diagnostics auto-fix
Polyglot Code Playground
Write hyperscript in any of 12 languages. Real-time grammar transformation shows all word orders.
polyglot i18n
Multilingual Sync
Same action, different grammars. Each user sees code in their native language syntax.
sync real-time
Adaptive RTL/LTR UI
Smooth View Transitions between LTR and RTL layouts.
RTL view transitions
Dynamic Hyperscript Injection
Fetch code snippets, transform to user's locale, inject into DOM, and execute.
injection i18n