THE ALTITUDE ATLAS — DRAWING SETSHEET 5 / 14

the DESIGN SPACE

ALTITUDE 5 — eleven entries placed by where matching happens and who owns navigation, shape marking the source of truth · positions are editorial, argued in the notes

AT BUILD TIME AT SERVER RUNTIME AT CLIENT RUNTIME WHERE ROUTES ARE MATCHED → LIBRARY FRAMEWORK PLATFORM WHO OWNS NAVIGATION ↑ SvelteKit — filesystem routes, compiled SvelteKit filesystem routes, compiled Next App Router — fs routes · server-first Next App Router fs routes · server-first React Router v7 — framework mode — Remix folded in React Router v7 framework mode — Remix folded in Angular Router — config tree in the injector Angular Router config tree in the injector Vue Router — official, but installable Vue Router official, but installable TanStack Router — typed at build, matched in the client TanStack Router typed at build, matched in the client wouter — minimal hook wouter minimal hook Hono / Express — server-only: match, no navigation Hono / Express server-only: match, no navigation node:http / fetch handler — a request, a URL string, no match node:http / fetch handler a request, a URL string, no match Navigation API — the primitive the client column builds on Navigation API the primitive the client column builds on the ui-router lineage — one named state tree, matched in every column; the URL is a projection lit-ui-router-ssr prerender · drawn to pages at build ui-router-server HTTP verdict per path ui-router / lit-ui-router navigated in the client ONE STATE TREE · MATCHED IN EVERY COLUMN · THE URL IS A PROJECTION THE EMPTY QUARTER nearly every router here is URL-first: the address is the source of truth. state-first routing is one lineage — three squares, one tree, every column. SHAPE = SOURCE OF TRUTH URL-first — the view is derived from the address state-first — a named state tree; the URL is one projection of it
FIG. 5No mechanism connects these projects, so an edge between them would be fiction; the one line on the sheet runs inside the lineage, where sheet 2 draws the mechanism. What is real is position: where matching happens, who owns navigation, and — the squares — whether the URL or a state tree is the source of truth.

GENERAL NOTES

This altitude forbids the city outright. A diagram's edges assert mechanism, and there is none between TanStack and SvelteKit. The honest form is a positioned chart whose axes are real, contested design decisions — with the positions owned as editorial judgment, not measurement.

Reading the columns: the field has been sliding left for a decade — filesystem routes and typegen move matching toward build time; server components move it toward the server. The client-runtime column is where the platform itself now competes, via the Navigation API. The server-runtime column has a platform floor of its own, drawn as one circle with two names: node:http hands a listener a request whose URL is a bare string, and the fetch handler hands one a Request and wants a Response back; neither matches anything, and Hono, Express and the lineage's connect and fetch adapters all stand on one or the other. URLPattern is the platform's matcher, in browsers and global in Node 24, and it stays off the plot: it matches a string against a pattern and owns neither a request nor navigation, so it is a part routers are built from, not a router.

The squares are the argument. Every circle on this chart treats the URL as the source of truth and derives the view from it. The ui-router lineage inverts that: a named, hierarchical state tree is primary, and the URL is a projection — one of several possible addresses for a state. That inversion is why sheet 1's loop runs through a state registry rather than a path matcher, and why the same tree answers HTTP requests in sheet 2's server lane. It is also why the squares sit alone: the niche is real, small, and — for state-heavy embedded UIs where the address bar is not the whole story — defensible.

One tree, every column — and this atlas is the measurement. The lineage is the one entry drawn in all three columns, and the bracket under its row is the sheet's one edge with a mechanism behind it. ui-router-server compiles the same state declarations into a mount table and gives each path an HTTP verdict — shell, redirect or 404 — at server runtime, in its connect, vite, fetch and hono adapters. lit-ui-router-ssr takes that mount table at build time, drives one router to every path and draws each <ui-view> to a page; its client half adopts the page one view per route match, the per-boundary, provided cell of the hydration models its guide compares. Every page of this atlas, this one included, is a verdict the server router gave and a document the prerenderer wrote at build, adopted by lit-ui-router at client runtime: the three squares are the three times one state tree matched the address you are reading.

KEY

URL-first router
state-first router (this lineage) — one square per column it matches in
the lineage's span — the sheet's one edge; sheet 2 draws the mechanism
editorial callout
column boundary (soft)
PROJECTTHE ALTITUDE ATLAS
SHEET TITLEthe DESIGN SPACE
SCALEJS ECOSYSTEM
FORMPOSITIONED CHART
CLIENTlit-ui-router · simshanith
DATE / REV2026-10-18 · D
DRAWN BYFable (Claude, AI)
SHEET5 OF 14