🧩 Components
Three independent counters on one page. Each is an isolated component with its own signals.
Components are sub-contexts with isolated state. Define a component once and instantiate it multiple times — each gets its own signals and actions.
Namespacing is automatic. Each component's signals and actions are prefixed with its name, preventing collisions even when the same component appears three times.
Independent updates — clicking a button in one component only re-renders that component's DOM target, not the entire page.
Zero boilerplate — a component is just a closure that receives a Context. Call
$c->component($fn, 'name') and it returns a render callable.Shared logic, separate state. All three counters use the exact same closure. The only difference is the component name passed at mount time.
Composable — components can nest other components. Build complex UIs from small, testable pieces without a custom component class hierarchy.
Counter: counter1
Count: 0
Counter: counter2
Count: 0
Counter: counter3
Count: 0
⚡ Signals
count
int TAB 0 Each component instance has its own count signal, auto-namespaced to avoid collisions.
🎯 Actions
increment
Adds 1 to that component's count. Only re-renders the owning component.
decrement
Subtracts 1 from that component's count.
👁 Views
components.html.twig
Page shell that mounts three independent counter components.
component_counter.html.twig
Reusable counter UI rendered per component instance.