Live demos
Playground
Every feature on this site has a live, clickable demo - this site is the router.
Watch the address bar as you click: each link below is a real route matched by the same
<Brouter> that served this page, and every group links to the
documentation page that explains it.
Route matching
Typed parameters, optionals, defaults, complex segments, catch-alls and specificity - docs.
- /counter/1234 - typed {init:int}
- /profile/saleh - trailing optional
- /products/en/list - middle optional
- /blog - default value (action = "Index")
- /files/report.pdf - complex segment
- /api/v2-10 - typed complex segment
- /posts/… - catch-all
- /assets/img/logo - constrained catch-all
- /rate/3 - constraint chaining
- /anything/test - wildcard
Constraints
All 18 built-in constraints, tested interactively - docs.
Nested routes & outlets
Parents render persistent layout, children fill outlets - docs.
Guards & locks
Preventive cancellation - the URL never moves - docs.
Data loading
Loaders, SWR caching, preloading, deferred data, error boundaries - docs.
Navigation & history
Awaited outcomes, history entry state - docs.
Lifecycle & keep-alive
Retention, per-parameter caching, lifecycle callbacks - docs.
View transitions
Shared-element morphs, direction-aware motion - docs.
Discovery & fallbacks
@page discovery and not-found handling - docs.
MCP server
The tools an AI agent gets from this site, called live - docs.