LeCodesdocs

Counter

The count lives in one signal, and a computed turns it into the status line. Nothing re-renders — reading .value in a text or style position subscribes just that binding, so a tap updates the number, the label and the button colour and nothing else.

Fork in LeCodes
// A signal holds state, a computed derives from it, and a `() =>` in a text or style
// position binds an element to that value. There is no re-render step: writing count.value
// updates exactly the two labels and the one color that read it.
const count = signal(0)
const status = computed(() =>
    count.value === 0 ? "Tap to start"
        : count.value % 10 === 0 ? "Milestone"
        : count.value % 2 === 0 ? "Even" : "Odd")

const screen = UIScreen([
    UIText(() => String(count.value)).style({ fontSize: 92, fontWeight: 700, color: "white" }),
    UIText(() => status.value).style({ fontSize: 15, color: "#8b90a0", letterSpacing: 1 }),
    UIButton([ UIText("+1").style({ fontSize: 20, fontWeight: 700, color: "white" }) ])
        .style({
            width: 168, height: 56, borderRadius: 28, justifyContent: "center",
            bgColor: () => (count.value > 0 && count.value % 10 === 0 ? "#22c55e" : "#FF4032"),
            onPressed: { opacity: 0.7 },
        })
        .onClick(() => count.value++),
]).style({ bgColor: "#0b0d12", alignItems: "center", justifyContent: "center", gap: 14 })

screen.open()

Press Run to launch the floating simulator. It stays open as you browse — opening another example just swaps the app inside it.

Related docs