Router

Mode

Skin

Theme

Overview & Philosophy

ln-router is declared globally with route definitions in <template data-ln-route="..."> elements rendering into <main data-ln-outlet> or auxiliary targets. It intercepts clicks on same-origin <a> tags and listens for popstate, matches the URL against specificity-ranked route patterns, and clones templates into designated outlets with View Transitions support. It unmounts old views by calling .destroy() on child components, leaving data fetching and view filling to route coordinators.

In accordance with project doctrine, the router does **not** fetch data, sanitise templates, or run data-binding logic. Instead, the router mounts the view, and the **page coordinator** listens for navigation events to populate the templates using the static text interpolation helper fillTemplate.

The /profile route below loads its markup from an external file via ln-include (data-ln-include="tpl/router-profile.html"). ln-router itself needs no changes — it still finds the <template data-ln-route> and clones its .content exactly as before, only now that content is populated asynchronously before the first clone.

Live Router Playground

Default Outlet

🏠 SSR Server-Rendered View

This is pre-rendered SSR content. Click a link above to test routing.

Target Region: detail-pane

Logs will render here...

Persistent Sidebar Region (data-ln-route-keep)

Diagnostics Console

[Console initialized. Awaiting events...]