Svelte SPA Router

Example Applications

The example app ships in both routing modes — same source, mode picked by the VITE_ROUTING_MODE environment variable. Two live deploys are kept current with main:

🚀 History Mode

Clean URLs via the History API. Requires server fallback to index.html in production (nginx, Apache, etc.).

Open History Mode Example

Locally: make dev → localhost:5050

🔗 Hash Mode

Hash-based #/path routing. No server config needed — works on static hosting, file://, anywhere.

Open Hash Mode Example

Locally: make dev-hash → localhost:5051

Demos by Category

Every demo below links to the history-mode deploy. For hash mode, swap https://history… for https://hash.svelte-spa-router.keenmate.dev/# and prepend # to the path.

/links-demo — link action formats (string, object, named, array)
/navigation-guard-demo — three exit-guard modes (wrapper, direct, dirty-check)
/navigation-context-demo — passing data between routes without URL pollution
/referrer-demo — automatic referrer tracking + scroll restoration via goBack()

/querystring-demo — built-in helpers + custom formatter (OData / Microsoft Graph)
/filters-demo — flat and structured filter modes
/route-data-demo — typed params, optional and wildcard segments
/tabs/:id — tab UI with querystring state preserving breadcrumbs
/user/:first/:last — multi-segment params
/book/* — wildcard catch-all routes

/define-routes-demo — type-safe defineRoutes() with nav/paths helpers
/route-context-demo — routeContext() for per-route static data
/metadata-demo — page titles + breadcrumbs via routeBreadcrumbs()
/loading-demo — shouldDisplayLoadingOnRouteLoad + hideLoading()
/multi-zone-demo — independent zones (sidebar / main / panel) sharing a router
/admin-tree — tree-structured routes via createHierarchy()

/error-handling-demo — GlobalErrorHandler + recovery strategies
/not-found-demo — onNotFound tracking + catch-all behavior

/authorization-demo — async authorizationCallback for per-resource checks
/admin — permission-protected route (toggle user in the header to test)
/settings — protected route requiring settings:manage

Tip: the example header has a Toggle 👤 button to switch between users with different permission sets.

Running Examples Locally

One example app, two modes. Mode is picked via the VITE_ROUTING_MODE env var (cross-env handles cross-platform).

Using Make (Recommended)

# History mode (port 5050)
make dev

# Hash mode (port 5051)
make dev-hash

Using npm

cd example
npm install

# History mode
npm run dev:history

# Hash mode
npm run dev:hash

Source Code

The example app source lives in the main router repository under example/. Both routing modes share the same source — the mode is selected at build time.

Example app

Full demo source — every feature shown above.

View example/ on GitHub

E2E test fixtures

Minimal Playwright fixtures kept separate from the user-facing demos. Useful when reading the spec suite.

View fixtures on GitHub

Quick Tips

🔍

Explore Features

Open every demo at least once — many have multiple sections covering edge cases

💻

View Source

The example/ files are the canonical reference — feature pages are written from them

🛠️

Experiment

Run locally with make dev and edit example/src/routes/ to test changes

📖

Read Docs

Each Features page on the left has a deep-link to its matching demo