Scripting for hypertext

HTML gets the language it deserves, with advanced event handling features and concise DOM manipulation. _hyperscript has a simple goal: make websites written in plain-old markup a joy to use.

Install: <script src="https://unpkg.com/hyperscript.org@0.9.7"></script>

Go to the docs

on pointerdown
  repeat until event pointerup
    set rand to Math.random() * 255
    transition
      *background-color
      to `hsl($rand 100% 90%)`
      over 250ms
  end

Try more examples in the playground

A language for interaction

Listen to and dispatch events with ease. Filter, queue or debounce them. You can even have control flow based on events.

In action → Disable a button during an htmx request, Drag-and-drop elements, Event filter

on input debounced at 15s
  send updated to form

Progressive enhancement

_hyperscript excels in enhancing existing HTML. Where frameworks demand full control over every step, _hyperscript stays low-level to give you full control. This means no reactivity or data binding — respond to user interactions, not data flow.

No more jQuery soup. _hyperscript can be written directly in HTML, and stays readable when it is. Organize your app by features, not languages. Achieve locality. If you do need to factor out your _hyperscript, you can use behaviors.

<div _="install Draggable(
  dragHandle: .titlebar)">

Remember HyperCard?

The xTalk syntax of _hyperscript is designed with the DOM as first priority. CSS selector literals and positional operators make it a breeze to access elements. Simple commands backed by modern DOM APIs.

In action → Filter A Group Of Elements, Filter table rows, Disable all Buttons During an htmx Request

tell <details /> in .article
  set you.open to false

Programming on easy mode

Async-transparency means _hyperscript makes asynchronous code as easy as synchronous — even easier than Promises or async/await. All the non-blocking goodness, without the red/blue functions.

fetch /words.json as json
set acceptedWords to the result

Fully interoperable with JavaScript, _hyperscript makes the perfect glue language for libraries. It also has a super-easy way to write web workers, if that's your thing.

js(haystack)
  return /needle/gi.exec(haystack)
end

There is a graphical debugger to inspect your code as it runs. Jump back and forth and bend time to your whim to iron out tricky UI glitches.

on click
  breakpoint

The whole language is written to be extensible. You can add new commands or expressions using nothing more than good-old JavaScript.

_hyperscript.addCommand(
  "foo",
  (parser, rt, tokens) => ...