_hyperscript

Finally... A scripting language for the web!

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

example.html

<input type="text"
       placeholder="Search..."
       _="on input
              hide #no-match
              show <li:not(#no-match)/> in #hero-results
                when its textContent contains my value
                ignoring case
              show #no-match when the result is empty" />

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

DOM Native

CSS selectors are first-class syntax. Reference elements by ID with #foo, by class with .bar, or with full query selectors like <nav a.active/>. No querySelector calls - just write selectors directly in your code.

<button _="on click add .highlight to <p/> in me">
<div _="on click put 'Hello' into #output">
<button _="on click take .active from .tabs for me">

Event Oriented

Every script starts with an event. Send events between elements, filter them with conditions, queue or debounce them. Events are the backbone of hyperscript.

<button _="on click send hello to <form/>">
<form _="on hello put 'Got it!' into me">
<input _="on keyup[key is 'Escape'] set my value to ''">

Reactive

Watch any value - variables, properties, attributes - and react when it changes. The runtime tracks dependencies automatically. Bind values together for two-way sync.

<input type="text" id="name" />
<h1 _="when #name.value changes put it into me"></h1>
<input _="bind $search" />

Async Transparent

Write linear, top-to-bottom code. Waiting, fetching, and animating just work - no promises, no callbacks, no async/await. Hyperscript handles it for you.

<button _="on click
              put 'Loading...' into me
              fetch /api/data as JSON
              put the result's name into me">

<div _="on click wait 2s then remove me">

xTalk Syntax

Inspired by HyperTalk, hyperscript reads like English and embeds naturally in HTML. An xTalk language for the modern web.

on click
  if I match .active
    remove .active from me
    put 'Enable' into me
  else
    add .active to me
    put 'Disable' into me

Extensible

Add custom commands, expressions, and features using vanilla JavaScript. The language grows with your needs. There's even a built-in stepping debugger.

_hyperscript.addCommand("greet",
  (parser, rt, tokens) => {
    let name = parser.requireElement("expression")
    return {
      args: { name },
      resolve(ctx, { name }) {
        alert("Hello, " + name + "!")
        return rt.findNext(this, ctx)
      }
    }
  })
// use it: <button _="on click greet 'World'">