Reactivity

> page state lives in the browser. Reads emit data-bind spans; writes patch them in place. Handlers run client-side and mutate the same names declared at the top of the page.

A button that counts in the browser

count++ inside on_click

count is page-tier state — it survives a render and mutates from the client. on_click[count++] compiles to a JS handler that writes back into the same span the [count] read drew, so the number updates without a network call.

> page
count: 0

<p> you've clicked [count] times
<button on_click[count++]> click me

Result

you've clicked 0 times

A button that counts in the server

count++ inside on_click

count is server-tier state — it survives a render and mutates from the server. on_click[count++] compiles to a JS handler that writes back into the same span the [count] read drew, so the number updates without a network call.

> server
count: 0    

> page
<p> you've clicked [count] times
<button on_click[count++]> click me

Result

you've clicked 0 times

Explicit writes with <<

Assignments outside handlers too

<< is the assignment operator. Inside a handler it updates page state; the surrounding [name] reads re-render automatically.

> page
name: 'Ada'

<p> Hello, [name]
<button on_click[name << 'Grace']> rename

Result

Hello, Ada

Derived fields with >>

Recompute when inputs change

name >> expr declares a read-only derived field. It recomputes whenever any of its inputs change, with no manual subscription wiring. Use it for formatted strings, sums, anything that's a pure function of other state.

> page
count: 0
double >> count * 2

<p> count: [count]
<p> doubled: [double]
<button on_click[count++]> +1

Result

count: 0

doubled: 0

Composing derivations

Strings, conditions, anything

Derived fields can reference other derived fields. greeting here recomputes whenever name does, and any [greeting] read elsewhere re-renders for free.

> page
name: 'Ada'
greeting >> 'Hello, ' + name + '!'

<p> [greeting]
<input value[name] on_input[name << event.target.value]>

Result

Hello, Ada!

Next: Pups — bundling markup + state + handlers into a reusable tag with props.