LokaScript Examples

Events & DOM

6 examples All Events & DOM patterns →

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

Hello World

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

on click put

Run example → Playground

Show/Hide Elements

Control element visibility with simple show/hide commands.

show hide

Run example → Playground

Input Mirroring

Mirror input values to other elements in real-time.

on input value

Run example → Playground

Counter

Increment and decrement values with button clicks.

increment decrement

Run example → Playground

Send/Receive Events

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

send on event

Run example → Playground

Tell Command

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

tell first/last

Run example → Playground

Toggle & State

2 examples All Toggle & State patterns →

Toggle CSS classes, HTML attributes, and CSS properties.

Toggle Classes

Add and remove CSS classes to create interactive UI elements.

toggle classes

Run example → Playground

Toggle Attributes

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

@attribute *property

Run example → Playground

Forms

2 examples All Forms patterns →

Input handling, validation, and form submission.

Form Validation

Client-side form validation with custom error messages.

validation forms

Run example → Playground

Partial Validation

Validate individual form fields as the user types.

validation inline

Run example → Playground

Dialogs

4 examples All Dialogs patterns →

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

Modal Dialog

Build accessible modal dialogs with keyboard support.

modal accessibility

Run example → Playground

Native Dialog

Use the native HTML dialog element with hyperscript.

dialog native

Run example → Playground

Dialog Toggle

Smart dialog toggle with modal and non-modal support.

toggle smart detection

Run example → Playground

Smart Element Toggle

Auto-detect and toggle dialog, details, summary, and select elements.

smart detection details

Run example → Playground

Navigation

3 examples All Navigation patterns →

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

Tab Navigation

Create tabbed interfaces without JavaScript frameworks.

navigation event delegation

Run example → Playground

History Navigation

SPA-style URL management with push and replace commands.

push url replace url

Run example → Playground

Boosted Links

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

boosted AJAX forms

Run example → Playground

Fetch & Async

3 examples All Fetch & Async patterns →

API calls, dynamic content loading, and async patterns.

Fetch Data

Load data from APIs and display it dynamically.

fetch JSON

Run example → Playground

Async & Fetch

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

wait fetch

Run example → Playground

Infinite Scroll

Load more content as user scrolls to bottom.

intersection fetch

Run example → Playground

Animation

4 examples All Animation patterns →

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

Fade Effects

Smooth transitions using hyperscript's transition command.

transition opacity

Run example → Playground

Color Cycling

HSL color animation with pointer hold event loop.

repeat until transitions

Run example → Playground

Color Cycling (Simple)

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

repeat until transition

Run example → Playground

View Transitions

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

view transitions animations

Run example → Playground

Drag & Drop

2 examples All Drag & Drop patterns →

Draggable elements and sortable lists with visual feedback.

Draggable Elements

Reusable drag behavior with custom events and parameters.

behavior measure

Run example → Playground

Sortable List

Drag-and-drop list reordering with visual feedback.

drag events dataTransfer

Run example → Playground

Swap & Morph

3 examples All Swap & Morph patterns →

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

Swap & Morph

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

swap morph

Run example → Playground

Morph Comparison

Compare different morphing strategies side by side.

morph comparison

Run example → Playground

Multi-Target Swaps

Update multiple page sections from a single response using partials.

hx-partial OOB updates

Run example → Playground

JS Interop

2 examples All JS Interop patterns →

JavaScript integration, clipboard operations, and browser APIs.

JavaScript Interop

Enhance existing code. Run inline JavaScript and pass parameters.

js...end interop

Run example → Playground

Clipboard Copy

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

writeText clipboard

Run example → Playground

Reusable Behaviors

2 examples All Reusable Behaviors patterns →

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

Run example → Playground

<lse-intent> — Declarative Intents LokaScript

Custom element that runs LSE (LokaScript Explicit Syntax) JSON through the hyperfixi runtime — behavior as data that LLMs and tools can emit. Validates, wires triggers, and dispatches lifecycle events; no _= attribute required.

<lse-intent> lse-protocol custom element llm-friendly

Run example → Playground

Multilingual

3 examples All Multilingual patterns →

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

Run example → Playground

Adaptive RTL/LTR UI

Smooth View Transitions between LTR and RTL layouts.

RTL view transitions

Run example → Playground

LLM Command Equivalence LokaScript

One LLM command in 8 languages — SVO, SOV, VSO — all compile to byte-identical LLMPromptSpec JSON.

domain-llm LLMPromptSpec i18n llm-friendly

Run example → Playground