Tour of Lux · chapter 7 of 8

Apps & views

Declarative UI that renders live, right here.

An app bundles state and a view: — a declarative layout tree of column / row / text / button. Event handlers hang off elements with on:click. This cell renders the app live: click the buttons — each interaction dispatches into the WASM session, re-renders the view, and ticks the session receipt.

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)

Views are expressions, so if works inside them. State changes re-render the tree — there is no manual DOM work anywhere.

app Toggle:
    enabled = signal(false)

    view:
        column gap=12 padding=24:
            if enabled:
                text "Status: ON" size=20 color=green
            else:
                text "Status: OFF" size=20 color=gray
            button "Flip" on:click -> enabled.update(v -> not v)

← Signals Energy as an observable →