---
url: https://lit-ui-router.dev/examples.md
description: >-
  Every lit-ui-router example app and live sample-app mount, with its language,
  location plugin, bindings, render mode, registry and lint facets, and links to
  run it, open it in StackBlitz and read its source
---

# Examples

Every example app in the repository, and every live mount of the
[sample app](/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](/tutorial/helloworld). Embedded in names the pages that run an
example inline; [Live examples](/examples/live) 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.

* Facets: kind `tutorial` · lang `ts` · location `hash` · bindings `none` · render `client` · registry `off` · lint `off`
* [Run it](/examples/helloworld/) · [Open in StackBlitz](https://stackblitz.com/github/simshanith/lit-ui-router/tree/main/examples/helloworld?file=src%2Fmain.ts) · [Source](https://github.com/simshanith/lit-ui-router/tree/main/examples/helloworld)
* Embedded in: [Hello World](/tutorial/helloworld)

### Hello World (No Build)

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

* Facets: kind `tutorial` · lang `js` · location `hash` · bindings `none` · render `client` · registry `off` · lint `off`
* [Run it](/examples/helloworld-buildless/) · [Open in StackBlitz](https://stackblitz.com/github/simshanith/lit-ui-router/tree/main/examples/helloworld-buildless?file=public%2Fmain.js) · [Source](https://github.com/simshanith/lit-ui-router/tree/main/examples/helloworld-buildless)
* Embedded in: [Live examples](/examples/live#hello-world-no-build)

### Hello Solar System

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

* Facets: kind `tutorial` · lang `ts` · location `hash` · bindings `none` · render `client` · registry `off` · lint `off`
* [Run it](/examples/hellosolarsystem/) · [Open in StackBlitz](https://stackblitz.com/github/simshanith/lit-ui-router/tree/main/examples/hellosolarsystem?file=src%2Fmain.ts) · [Source](https://github.com/simshanith/lit-ui-router/tree/main/examples/hellosolarsystem)
* Embedded in: [Hello Solar System](/tutorial/hellosolarsystem)

### Hello Solar System (MobX)

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

* Facets: kind `tutorial` · lang `ts` · location `hash` · bindings `mobx` · render `client` · registry `on` · lint `off`
* [Run it](/examples/hellosolarsystem-mobx/) · [Open in StackBlitz](https://stackblitz.com/github/simshanith/lit-ui-router/tree/main/examples/hellosolarsystem-mobx?file=src%2Fmain.ts) · [Source](https://github.com/simshanith/lit-ui-router/tree/main/examples/hellosolarsystem-mobx)
* Embedded in: [Reactive Components](/guides/reactive-components), [lit-ui-router-mobx](/packages/lit-ui-router-mobx)

### Hello Solar System (Signals)

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

* Facets: kind `tutorial` · lang `ts` · location `hash` · bindings `signals` · render `client` · registry `on` · lint `off`
* [Run it](/examples/hellosolarsystem-signals/) · [Open in StackBlitz](https://stackblitz.com/github/simshanith/lit-ui-router/tree/main/examples/hellosolarsystem-signals?file=src%2Fmain.ts) · [Source](https://github.com/simshanith/lit-ui-router/tree/main/examples/hellosolarsystem-signals)
* Embedded in: [Live examples](/examples/live#hello-solar-system-signals)

### Hello Galaxy

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

* Facets: kind `tutorial` · lang `ts` · location `hash` · bindings `none` · render `client` · registry `off` · lint `off`
* [Run it](/examples/hellogalaxy/) · [Open in StackBlitz](https://stackblitz.com/github/simshanith/lit-ui-router/tree/main/examples/hellogalaxy?file=src%2Fmain.ts) · [Source](https://github.com/simshanith/lit-ui-router/tree/main/examples/hellogalaxy)
* Embedded in: [View Fallback Content](/guides/view-fallback-content), [Hello Galaxy](/tutorial/hellogalaxy)

### Hello Galaxy (Effect)

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

* Facets: kind `tutorial` · lang `ts` · location `hash` · bindings `effect` · render `client` · registry `on` · lint `off`
* [Run it](/examples/hellogalaxy-effect/) · [Open in StackBlitz](https://stackblitz.com/github/simshanith/lit-ui-router/tree/main/examples/hellogalaxy-effect?file=src%2Fmain.ts) · [Source](https://github.com/simshanith/lit-ui-router/tree/main/examples/hellogalaxy-effect)
* Embedded in: [Live examples](/examples/live#hello-galaxy-effect)

### Hello Galaxy (Signals)

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

* Facets: kind `tutorial` · lang `ts` · location `hash` · bindings `signals` · render `client` · registry `on` · lint `off`
* [Run it](/examples/hellogalaxy-signals/) · [Open in StackBlitz](https://stackblitz.com/github/simshanith/lit-ui-router/tree/main/examples/hellogalaxy-signals?file=src%2Fmain.ts) · [Source](https://github.com/simshanith/lit-ui-router/tree/main/examples/hellogalaxy-signals)
* Embedded in: [Live examples](/examples/live#hello-galaxy-signals)

## 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.

* Facets: kind `example` · lang `ts` · location `pushState` · bindings `none` · render `prerender` · registry `off` · lint `off`
* [Run it](/examples/hellosolarsystem-eleventy/) · [Open in StackBlitz](https://stackblitz.com/github/simshanith/lit-ui-router/tree/main/examples/hellosolarsystem-eleventy?file=src%2Fprerender.ts) · [Source](https://github.com/simshanith/lit-ui-router/tree/main/examples/hellosolarsystem-eleventy)
* Embedded in: [Prerender with Eleventy](/guides/prerender-with-eleventy)

### Hello Solar System (Vite SSR)

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

* Facets: kind `example` · lang `ts` · location `pushState` · bindings `none` · render `prerender` · registry `off` · lint `off`
* [Run it](/examples/hellosolarsystem-ssr/) · [Open in StackBlitz](https://stackblitz.com/github/simshanith/lit-ui-router/tree/main/examples/hellosolarsystem-ssr?file=src%2Fprerender.ts) · [Source](https://github.com/simshanith/lit-ui-router/tree/main/examples/hellosolarsystem-ssr)
* Embedded in: [Prerender with Vite](/guides/prerender-with-vite)

### Design System Links

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

* Facets: kind `example` · lang `ts` · location `hash` · bindings `none` · render `client` · registry `off` · lint `off`
* [Run it](/examples/design-system-links/) · [Open in StackBlitz](https://stackblitz.com/github/simshanith/lit-ui-router/tree/main/examples/design-system-links?file=src%2Fmain.ts) · [Source](https://github.com/simshanith/lit-ui-router/tree/main/examples/design-system-links)
* Embedded in: [Design System Links](/guides/design-system-links)

### ESLint Plugin

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

* Facets: kind `example` · lang `ts` · location `hash` · bindings `none` · render `client` · registry `off` · lint `on`
* [Run it](/examples/lint-eslint/) · [Open in StackBlitz](https://stackblitz.com/github/simshanith/lit-ui-router/tree/main/examples/lint-eslint?file=src%2Fmain.ts) · [Source](https://github.com/simshanith/lit-ui-router/tree/main/examples/lint-eslint)
* Embedded in: [ESLint Plugin](/packages/eslint-plugin-lit-ui-router)

### Navigation API

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

* Facets: kind `example` · lang `ts` · location `navigation` · bindings `none` · render `client` · registry `off` · lint `off`
* [Run it](/examples/navigation-api/) · [Open in StackBlitz](https://stackblitz.com/github/simshanith/lit-ui-router/tree/main/examples/navigation-api?file=src%2Fmain.ts) · [Source](https://github.com/simshanith/lit-ui-router/tree/main/examples/navigation-api)
* Embedded in: [Navigation API Plugin](/packages/ui-router-navigation-location-plugin)

### Loading and Error Views

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

* Facets: kind `example` · lang `ts` · location `hash` · bindings `none` · render `client` · registry `off` · lint `off`
* [Run it](/examples/loading-and-error-views/) · [Open in StackBlitz](https://stackblitz.com/github/simshanith/lit-ui-router/tree/main/examples/loading-and-error-views?file=src%2Fmain.ts) · [Source](https://github.com/simshanith/lit-ui-router/tree/main/examples/loading-and-error-views)
* Embedded in: [Loading and Error Views](/guides/loading-and-error-views)

## Sample apps

### Vanilla sample app

* Facets: kind `sample-app` · bindings `none` · render `client` · registry `on` · lint `off`
* [Open `/app`](/app) · [Source](https://github.com/simshanith/lit-ui-router/tree/main/apps/sample-app-lit-vanilla)

### MobX sample app

* Facets: kind `sample-app` · bindings `mobx` · render `client` · registry `on` · lint `off`
* [Open `/app-mobx`](/app-mobx) · [Source](https://github.com/simshanith/lit-ui-router/tree/main/apps/sample-app-lit-mobx)

### Effect sample app

* Facets: kind `sample-app` · bindings `effect` · render `client` · registry `on` · lint `off`
* [Open `/app-effect`](/app-effect) · [Source](https://github.com/simshanith/lit-ui-router/tree/main/apps/sample-app-lit-effect)

### Signals sample app

* Facets: kind `sample-app` · bindings `signals` · render `client` · registry `on` · lint `off`
* [Open `/app-signals`](/app-signals) · [Source](https://github.com/simshanith/lit-ui-router/tree/main/apps/sample-app-lit-signals)

### Hash sample app

* Facets: kind `sample-app` · bindings `none` · render `client` · registry `on` · lint `off`
* [Open `/app-hash`](/app-hash) · [Source](https://github.com/simshanith/lit-ui-router/tree/main/apps/sample-app-lit-vanilla)

## 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](/site/) describes it, and the
[server-side overview](/guides/server) lists it beside the other hosts.

The [Altitude Atlas](https://atlas.lit-ui-router.dev) draws the packages and
their sources as interactive models; it is built from this repository too.