Reactive counter

A complete reactive app in ten lines: layout, state, events, and an energy readout.

# A complete reactive app: layout, state, events, and an energy readout.
app Counter:
    count = signal(0)

    view:
        column gap=16 padding=24:
            text "Count: {count}" size=24
            row gap=8:
                button "+" on:click -> count.update(n -> n + 1)
                button "-" on:click -> count.update(n -> n - 1)
            text "{energy.total()} J" color=gray size=12

Open in the playground (full editor) →

Walkthrough

app Counter: declares a reactive application — state, view, and behavior in one block.
signal(0) creates a reactive value. Reading it inside the view registers a dependency automatically.
The view is a declarative tree: elements by name (column, row, text, button), styled by properties (gap, padding, size), composed by indentation.
on:click -> count.update(n -> n + 1) wires an event straight to a state update. Only the text node that reads count re-renders.
energy.total() — the app reads its own meter and shows it in the UI.

Reactive counter

Walkthrough

Related