hyperscript is an easy & approachable language designed for modern front-end web development

writeText(the #snippet's innerText)
  into the navigator's clipboard
put 'copied!' into me
wait 1s
put 'copy' into me

see it in action →

hyperscript makes writing event handlers and highly responsive user interfaces easy with a clear, DOM-oriented syntax and by transparently handling asynchronous behavior for you — easier than callbacks, promises, even async/await.

features

Events as first class citizens in the language—clean syntax for receiving and sending events, as well as event-driven control flow

DOM-oriented syntax—seamless integrated CSS id, CSS class and CSS query literals

First-class web workers

Async-transparent runtime—highly responsive user experiences without callback hell

Pluggable & extendable parser & grammar

Debugger to step through hyperscript code

An xTalk syntax, inspired by HyperTalk

β hyperscript is in active development and is working to a 1.0 release. At this time, the syntax and core feature set are considered to be reasonably complete. Key areas of focus for 1.0 include additional test cases and documentation improvements. Please join us at the #hyperscript discord channel as we push to 1.0! Thank you!

NB: because hyperscript relies on promises it cannot offer IE11 compatibility

examples

Example
<button _="on click toggle .big-text">
Toggle the "big-text" class on me on click
</button>
Example
<div _="on mouseenter toggle .visible on #help until mouseleave">
Mouse Over Me!
</div>
<div id="help"> I'm a helpful message!</div>
Mouse Over Me!
I'm a helpful message!
Example
<button _="on click
           call alert('OK, Going to put the current date into the output!')
           make a Date then put it into the next <output/>">
Show An Alert
</button>
<output>--</output>

--