///_hyperscript

hyperscript

Finally... A scripting language for the web

Scripting HTML without tears: concise DOM manipulation, events, reactivity & more, no async or await.

38KB (10ms over 4G), zero dependencies, install with Install URL Copied!` at the end of me<br>wait 1s then remove the last in me">a script tag.

example.html

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

in #hero-results when its textContent contains my value ignoring case<br>beep! the result<br>show #no-match when beep! the result is empty" />

Macintosh 128K

Macintosh 512K

Macintosh 512Ke

Macintosh Plus

Macintosh SE

Macintosh SE/30

Macintosh II

Macintosh IIx

Macintosh IIcx

Macintosh IIci

Macintosh IIfx

Macintosh Classic

Macintosh Classic II

Macintosh LC

Macintosh LC II

Macintosh LC III

Macintosh Color Classic

Macintosh Quadra 700

Macintosh Quadra 800

Macintosh Quadra 900

Macintosh Quadra 950

Macintosh Centris 610

Macintosh Centris 650

PowerBook 100

PowerBook 140

PowerBook 170

PowerBook 540c

PowerBook Duo 210

Power Macintosh 6100

Power Macintosh 7100

Power Macintosh 8100

Power Macintosh G3

Power Mac G4

Power Mac G4 Cube

Power Mac G5

iMac G3

iMac G4

iMac G5

iBook

eMac

Mac Mini

No models found.

Install

copy

DOM Native

CSS selectors are first-class syntax. Reference elements by ID with #foo,<br>by class with .bar, or with full query selectors like .

No querySelectorAll() calls: write selectors directly in your code.

button _="on click add .highlight to in me"><br>div _="on click put 'Hello' into #output"><br>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,<br>filter them with conditions, queue and debounce them.

Hyperscript ❤️ events!

button _="on click send hello to "><br>form _="on hello put 'Got it!' into me"><br>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<br>put 'Loading...' into me<br>fetch /api/data as JSON<br>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<br>${} interpolation, and the runtime handles re-rendering via morphing.

Components should be easy. Hyperscript makes them easy.

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

click-counter>click-counter><br>click-counter>click-counter>

Reactive

Reactivity should be easy too. You shouldn't need to declare signals or useEffects(). You should just<br>write the code.<br>Hyperscript tracks dependencies automatically, updating content when they change.

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

Extensible

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

_hyperscript.addCommand("greet",<br>(parser) => {<br>let name = parser.requireElement("expression")<br>return {<br>args: { name },<br>resolve(ctx, { name }) {<br>alert("Hello, " + name + "!")<br>return ctx.meta.runtime.findNext(this, ctx)<br>})<br>// use it:

xTalk Syntax

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

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

hyperscript is under construction, working towards 1.0. While the syntax and<br>features are largely complete, we're focused on more tests and docs. Please join us at the<br>#hyperscript discord channel<br>- thank you!