Examples menu

🪄 Multi-step Form

A 3-step dev identity card wizard. All form state lives on the server and persists across page refreshes — no client serialization, no session cookies, no localStorage.

Session persistence — wizard state is saved to $c->setSessionData('wizard', [...]) on every Next/Back action. Refreshing the page resumes exactly where you left off.

Server-owned form state — each step's inputs are signals held on the server. Going back returns the same values you entered. No client serialization needed.

data-bind creates two-way bindings between inputs and signals. When the user types, the signal updates client-side. When "Next" fires, the server reads the current signal values.

Step validation happens server-side in the next action. If validation fails, the error signal is set and $c->sync() re-renders the current step with the error message shown.

block: 'demo' — only the wizard block is re-rendered on each step change. The page header and anatomy panel stay static in the DOM.

The generated card in step 3 is fully server-rendered from signal values. No client-side template, no JSON fetch — the complete card HTML is streamed via SSE.

1 Basics 2 Stack 3 Preview

Step 1: The Basics

Your name

Role

Years of experience: 3

Source View handler .php → View template .twig →

⚡ Signals

step int TAB 1

Current wizard step (1–3). Controls which step UI is rendered.

name string TAB ""

Developer name, collected in step 1.

role string TAB "Backend Dev"

Selected role from dropdown in step 1.

years int TAB 3

Years of experience, entered in step 1.

sphp … sother bool TAB false

One boolean signal per stack technology, bound to checkboxes in step 2.

editor string TAB "VS Code"

Favourite editor, selected in step 2.

error string TAB ""

Validation message set by the next action on step 1 failure.

🎯 Actions

next

Validates step 1, increments step, and calls $c->sync() to render the next step.

back

Decrements step and re-renders. Signal values from the previous step are preserved.

restart

Resets all signals to defaults and returns to step 1.

👁 Views

wizard.html.twig

Single template with step-conditional blocks. Only the demo block re-renders on each step transition.