Examples

Basics

5 examples

Hello World

Your first hyperscript. Learn basic event handling and DOM updates.

on click put

Toggle Classes

Add and remove CSS classes to create interactive UI elements.

toggle classes

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

Landing Page Examples

6 examples

Examples from hyperscript.org showcasing core features.

Color Cycling

Press and hold to cycle through colors. Event-driven loops with CSS transitions.

repeat until transition

Send/Receive Events

Events are first class citizens. Send custom events between elements.

send on event

Async & Fetch

Be async with no extra code. No promises, async/await, or callbacks needed.

wait fetch

JavaScript Interop

Enhance existing code. Run inline JavaScript and pass parameters.

js...end interop

Tell Command

HyperCard-inspired syntax. Tell multiple elements what to do at once.

tell first/last

Clipboard Copy

Copy to clipboard button with visual feedback using the Clipboard API.

writeText clipboard

Multilingual

6 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

Dictionary Editor

Contribute translations. Browse coverage, edit keywords, and export for PRs.

community contribute

Intermediate

9 examples

Level up with form handling, AJAX requests, animations, and conditional logic.

Form Validation

Client-side form validation with custom error messages.

validation forms

Fetch Data

Load data from APIs and display it dynamically.

fetch JSON

Fade Effects

Smooth transitions using hyperscript's transition command.

transition opacity

Tab Navigation

Create tabbed interfaces without JavaScript frameworks.

navigation event delegation

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

Toggle Attributes

Toggle HTML attributes (@disabled, @required) and CSS properties (*display, *visibility).

@attribute *property

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

Advanced

6 examples

Complex patterns including behaviors, drag-and-drop, animations, and state management.

Color Cycling

HSL color animation with pointer hold event loop.

repeat until transitions

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

Infinite Scroll

Load more content as user scrolls to bottom.

intersection fetch

State Machine

Manage complex UI states with hyperscript patterns.

states transitions

All Advanced Examples

View all advanced examples together in one comprehensive page.

complete showcase

htmx-like Features

5 examples

Modern htmx-inspired features: intelligent DOM swapping, View Transitions API, and SPA-style navigation.

Swap & Morph

Intelligent DOM swapping with morphing. Preserves form state, focus, and scroll position.

swap morph

View Transitions

Smooth CSS-powered page transitions using the View Transitions API.

view transitions animations

History Navigation

SPA-style URL management with push and replace commands.

push url replace url

Multi-Target Swaps

Update multiple page sections from a single response using partials.

hx-partial OOB updates

Boosted Links

Automatic AJAX navigation for links and forms. Like hx-boost!

boosted AJAX forms

Experiments

4 examples

Novel patterns from LokaScript's unique combination of htmx-like features, hyperscript scripting, and multilingual grammar transformation.

Polyglot Code Playground

Write hyperscript in any of 12 languages. Real-time grammar transformation shows all word orders.

experiment i18n

Multilingual Sync

Same action, different grammars. Each user sees code in their native language syntax.

experiment real-time

Adaptive RTL/LTR UI

Smooth View Transitions between LTR and RTL layouts.

experiment RTL

Dynamic Hyperscript Injection

Fetch code snippets, transform to user's locale, inject into DOM, and execute.

experiment injection