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.
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
Companion of htmx | Comparison with VanillaJS & jQuery | Read the docs | Try it on the playground | Check out the cheatsheet
Install: <script src="https://unpkg.com/hyperscript.org@0.9.5"></script>
NB: because hyperscript relies on promises it cannot offer IE11 compatibility
<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
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>