///_hyperscript

NOTE: hyperscript is still in very early development and may change dramatically between releases. Please bear this in mind, and jump on the #hyperscript discord channel to work with us as we develop the language. Thank you!

intro

hyperscript is an experimental scripting language designed for the web, inspired by HyperTalk

hyperscript features include:

Events are first class citizens in the language with clean syntax for responding to and sending events, as well as event-driven control flow
DOM-oriented syntax, such as CSS id, CSS class and CSS query literals
First class web workers
An async-transparent runtime, which removes the distinction between synchronous and asynchronous code
A pluggable & extendable parser & grammar
A debugger to step through hyperscript code

You can see a comparison of hyperscript, vanillaJS and jQuery here.

hyperscript is a companion project of htmx but note that because promises are not available in IE hyperscript does not strive for IE11 compatibility.

examples

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

<button _="on click toggle .big-text">
  Toggle the "big-text" class on me on click
</button>

<div _="on mouseenter toggle .visible on #help until mouseleave">
  Mouse Over Me!
</div>
<div id="help"> I'm a helpful message!</div>

<button _="on click log me then call alert('yep, it\’s an alert')">
    Show An Alert
</button>

demos

Here are the examples above in demo form:

<div style="width: 100; height: 100" _="on pointermove(clientX, clientY) 
	add {
		background-color: `hsl(clientX, clientY, 1)`
	} to me"></div>

Mouse Over Me!

I'm a helpful message!

haiku

the unknown button
so often inscrutable
now says what it does