🎨 Theme Builder
Click swatches to repaint the preview card server-side. Every color is a server round-trip — and undo/redo is just a PHP array index.
Undo/redo without JavaScript — every setColor action pushes to a PHP array on the server. Undo decrements the index; redo increments it. No client history stack, no immutable state library.
Server-authoritative visual state — the preview card's colors are CSS inline styles rendered by Twig from the current history entry. The client is a pure render surface.
History truncation on branch — if you undo two steps and pick a new color, future redo states are discarded. Standard undo behavior, four lines of PHP.
Disconnect cleanup — onDisconnect removes the history array for this context, so long-lived sessions don't leak memory.
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
🎯 Actions
setColor
Reads ?slot= and ?color= params, validates against swatch whitelist, pushes to history, calls $c->sync().
undo
Decrements the history index and re-renders via $c->sync().
redo
Increments the history index and re-renders via $c->sync().
reset
Resets history to the single default theme entry.
👁 Views
theme_builder.html.twig
Swatch grid + preview card. Preview uses inline CSS from the current history entry. Full demo block re-renders on each action.