_hyperscript

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.

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

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

See the Comparison with VanillaJS & jQuery

Read the docs

Try it on the playground

Community news: This Week in HTMX

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>

--