Examples menu

📊 All Scopes

Demonstrates GLOBAL, ROUTE, and TAB scopes side by side.

Three scopes on one page — GLOBAL (status banner), ROUTE (shared page counter), and TAB (personal message). Each component lives in a different scope to show the contrast.
Navigate between sub-pages to see the difference: the GLOBAL banner stays identical everywhere, the ROUTE counter resets per page, and the TAB message is unique per browser tab.
Components encapsulate each scope layer. The same page factory mounts all three components, so adding a new sub-page is a single function call.
Scope hierarchy visualised: GLOBAL lives for the entire server lifetime, ROUTE resets when you change URL, and TAB is born and dies with each browser tab.
Try it: open two tabs on the same sub-page and click the ROUTE counter. Both tabs update. Now open a tab on a different sub-page — its counter is independent.
GLOBAL — System Status
Status: High load detected · Visitors: 114

Shared across ALL pages and users. Changes propagate everywhere.

ROUTE — Shared Page Counter
0

Shared by all users on THIS page only. Different pages have different counters.

TAB — Your Personal Message
Your message:

Private to this browser tab. Other tabs have their own value.

Home

This app demonstrates all three scopes. Navigate between pages to see how each scope behaves differently.

Source View handler .php → View template .twig →

⚡ Signals

personalMessage string TAB Hello...

Per-tab editable message. Private to each browser tab.

🎯 Actions

updateStatus GLOBAL

Randomizes system status and increments global visitor count.

increment ROUTE

Increments the page-specific shared counter.

reset ROUTE

Resets the page-specific counter to 0.

updateMessage TAB

Randomizes the personal tab message.

👁 Views

all_scopes.html.twig

Page shell with navigation between sub-pages.

Global banner

GLOBAL-scoped component showing system status shared across all pages and users.

Route counter

ROUTE-scoped component with a counter shared between all tabs on the same page.

Tab message

TAB-scoped component with a private editable message per browser tab.