Examples menu

🎨 Theme Builder

Composition API: undo/redo history lives in a #[Persist] array — per-connection server state, no signals. Click swatches to repaint the preview card server-side.

#[Persist] history — the undo/redo stack is a plain instance array. Each connection gets its own instance, so no static maps keyed by context id are needed; the state is freed automatically when the tab closes.
No signals, no onDisconnect — the visual state is fully server-authoritative and bound to the instance lifetime. The closure version's manual onDisconnect cleanup disappears entirely.
Undo/redo without JavaScript — setColor pushes a new entry; undo decrements $this->historyIdx, redo increments it. History truncation on branch is a single array_slice.
Callable view + $ctx->sync() — each #[Action] mutates the history, then calls sync() to re-render. The view closure re-reads the live $this->history entry every render.
Input validation — only pre-approved swatch hex values are accepted. The server ignores any color not in its whitelist, making the action safe from injected values.
block: 'demo' — on every undo/redo/setColor, only the demo block is re-rendered and morphed. The page header and anatomy panel stay static.
Background #ffffff
Primary #6366f1
Text #1e293b
Border #e2e8f0
Accent #f59e0b
My App Docs · Blog · Login

Welcome! This preview card reflects your current theme in real time — every color stored and rendered on the server.

★ Featured product of the week
© 2026 My App — All rights reserved
Step 1 / 1
Source View page class .php → View template .twig →

⚡ Signals

history array Persist [default theme]

#[Persist] undo/redo stack. Per-connection instance state — not a signal, never sent to the client.

historyIdx int Persist 0

#[Persist] index of the active history entry. Undo/redo move this pointer.

🎯 Actions

setColor

Reads ?slot= and ?color= params, validates against the swatch whitelist, pushes to history, calls $ctx->sync().

undo

Decrements $this->historyIdx and re-renders via $ctx->sync().

redo

Increments $this->historyIdx and re-renders via $ctx->sync().

reset

Resets history to the single default theme entry.

👁 Views

theme_builder.html.twig

Unchanged from the closure version. Preview uses inline CSS from the current history entry. Full demo block re-renders on each action.