Finally... A scripting language for the web

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 querySelectorAll() calls: 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

In hyperscript, events are first class citizens. Respond to events easily. Send events between elements, filter them with conditions, queue abd debounce them.

Hyperscript ❤️ events!

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

Async Transparent

Write linear, top-to-bottom code. Waiting, fetching, and animating just work.

No more promises, no more 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">

Components

Define reusable custom elements with reactive templates. Write markup with ${} interpolation, and the runtime handles re-rendering via morphing.

Components should be easy. Hyperscript makes them easy.

<template hyper-component="click-counter"
          _="init set ^count to 0">
  <button _="on click increment ^count">+</button>
  <span>Clicks: ${^count}</span>
</template>

<click-counter></click-counter>
<click-counter></click-counter>

Reactive

Reactivity should be easy too. You shouldn't need to declare signals or useEffects(). You should just write the code.

Hyperscript tracks dependencies automatically, updating content when they change.

<input type="text" id="name" _="bind me to $value"/>
<h1 _="when $value changes put it into me"></h1>
<template live>
  The value is ${value}!
</template>

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) => {
    let name = parser.requireElement("expression")
    return {
      args: { name },
      resolve(ctx, { name }) {
        alert("Hello, " + name + "!")
        return ctx.meta.runtime.findNext(this, ctx)
      }
    }
  })
// use it: <button _="on click greet 'World'">

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