Lit UI Router

Examples ​

Every example app in the repository, and every live mount of the sample app. Run it opens the built app this site serves; Open in StackBlitz boots an editable workspace installed from the published npm packages. The tutorial walks through three of them in order, starting with Hello World. Embedded in names the pages that run an example inline; Live examples runs the ones no other page embeds.

Each entry lists its facets, read from the example's own files:

  • kind: tutorial for a tutorial rung or a variant of one, example for an app that shows one feature, sample-app for a live sample-app mount.
  • lang: ts or js.
  • location: the location plugin it hands the router: navigation, pushState or hash. A hash URL keeps navigation inside an embed's frame. The sample apps choose theirs at boot, so they carry none.
  • bindings: the reactivity bindings it uses: none, mobx, signals or effect.
  • render: client when the browser renders every page, prerender when a build writes them with lit-ui-router-ssr.
  • registry: on when it types its state names with ui-router-registry.
  • lint: on when it runs eslint-plugin-lit-ui-router.

Tutorial ​

Hello World ​

Ultra-minimal starter: two states with uiSref/uiSrefActive navigation.

Hello World (No Build) ​

The same starter in plain JavaScript: an import map to a CDN, no TypeScript and no build step.

Hello Solar System ​

Solar System tour: route parameters and async resolve data with a master/detail flow.

Hello Solar System (MobX) ​

The same tour rebuilt on lit-ui-router-mobx: an observable router store, reactions, and a computed tour.

Hello Solar System (Signals) ​

The same tour with lit-ui-router-signals and @lit/context: a provided unit signal, the consumed router.

Hello Galaxy ​

Milky Way explorer: nested states and views, resolve inheritance, and a 3D model-viewer surprise.

Hello Galaxy (Effect) ​

The same explorer rebuilt on Effect: typed resolve inheritance, state-scoped fibers, and interruptible loads.

Hello Galaxy (Signals) ​

The same explorer with both Lit signal bindings: a star chart shared by nested views, route-driven crumbs.

Examples ​

Hello Solar System (Eleventy SSR) ​

The same tour prerendered by Eleventy and lit-ui-router-ssr: static pages, a 404 page and redirect rules, adopted on boot.

Hello Solar System (Vite SSR) ​

The same tour prerendered by vite build alone: serverRouterPlugin and one prerender script.

uiSref driving a design-system link element (<sp-link>): assignHref: true vs 'auto'.

ESLint Plugin ​

eslint-plugin-lit-ui-router the ESLint-only way, with the lint report rendered in the page.

ui-router-navigation-location-plugin with an app navigate listener that holds a link leaving the app.

Loading and Error Views ​

Per-route pending and error views from transition hooks and inherited data, a NOWAIT resolve, and retry.

Sample apps ​

Vanilla sample app ​

  • Facets: kind sample-app · bindings none · render client · registry on · lint off
  • Open /app · Source

MobX sample app ​

  • Facets: kind sample-app · bindings mobx · render client · registry on · lint off
  • Open /app-mobx · Source

Effect sample app ​

  • Facets: kind sample-app · bindings effect · render client · registry on · lint off
  • Open /app-effect · Source

Signals sample app ​

Hash sample app ​

  • Facets: kind sample-app · bindings none · render client · registry on · lint off
  • Open /app-hash · Source

Elsewhere ​

This site is a consumer too: its worker answers each request with ui-router-server, and renders the release pages with lit-ui-router-ssr. How this site runs describes it, and the server-side overview lists it beside the other hosts.

The Altitude Atlas draws the packages and their sources as interactive models; it is built from this repository too.