Enhance HTML with concise DOM, event and async features. Make writing interactive HTML a joy.
on pointerdown repeat until event pointerup from the document set rand to Math.random() * 360 transition *background-color to `hsl($rand 100% 90%)` over 250ms end transition *background-color to initial
<script src="https://unpkg.com/hyperscript.org@0.9.14"></script> Easily send and receive events. Chain events together. Filter, queue or debounce events.
In action ➡️ Disable a button during an htmx request, Drag-and-drop elements, Event filter
<button _="on click send hello to <form />">Send</button> <form _="on hello alert('got event')"> Highly interactive user experiences without promises, async / await or callback hell.
_hyperscript transparently handles asynchronous behavior for you.
<div _="on click wait 5s send hello to .target"> <div _="init fetch https://stuff as json then put result into me">Using fetch() API...</div> _hyperscript works side by side with existing javascript. You choose what and when to enhance.
Use locality of behaviour, or external behaviors.
_hyperscript has a super-easy way to write web workers.
<div _="init js alert('Hello from JavaScript!') end"></div> <div _="init js(haystack) return /needle/gi.exec(haystack) end"> <div _="install Draggable(dragHandle: .titlebar)"> An xTalk syntax inspired by HyperTalk, AppleScript; natively inside your browser.
CSS selector literals and positional operators make it a breeze to access DOM elements. Simple commands backed by modern browser API's.
In action ➡️ Filter A Group Of Elements, Filter table rows, Disable all Buttons During an htmx Request
<div _="on click tell <p/> in me add .highlight"> <div _="tell <details /> in .article set you.open to false"> Graphically debug and step through code as it runs.
on click breakpoint _hyperscript is natively extensible. Add new commands or expressions using vanilla javascript.
_hyperscript.addCommand( "foo", (parser, rt, tokens) => ...)