§ Reactivity

Hyperscript has several mechanisms for making your UI respond automatically to changes in data, without requiring manual DOM updates or complex state management.

§ The bind Feature

The bind feature lets you bind an expression to a target, keeping the target in sync whenever the expression's value changes:

<input type="text" _="bind my.value to #output's innerHTML" />
<div id="output"></div>

Bindings are automatically updated when the underlying data changes, with no manual wiring needed.

You can bind to attributes, properties, or styles:

bind @disabled of #submit to myForm.invalid
bind *opacity of #panel to if visible then 1 else 0

§ The when Modifier

The when modifier on event handlers provides a declarative way to conditionally handle events based on reactive conditions:

<button _="on click when #terms.checked
             call submitForm()">
  Submit
</button>

The button only responds to clicks when the checkbox is checked.

§ The observe Command

The observe command lets you watch for mutations on elements and respond to them:

observe childList of #container
  log "Children changed!"
end

This uses the MutationObserver API under the covers, but with a much simpler syntax.

§ Event-Driven Reactivity

Hyperscript's event system is itself a form of reactivity. Custom events let you build reactive data flows:

<input type="range" _="on input send valueChanged(value: my.value) to the next <output/>" />
<output _="on valueChanged put event.value into me"></output>

Combined with async transparency, this gives you reactive behavior without any framework overhead.