An easy & approachable language for modern web front-ends

Enhance HTML with concise DOM, event and async features. Make writing interactive HTML a joy.

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

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

Companion of htmx | Comparison with Vanilla JS & jQuery | Check out the cheatsheet

Events are first class citizens

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')">

Be async with no extra code

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>

Enhance existing code

_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)">

Remember HyperCard?

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">

Debugging and extending

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) => ...)