Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/jpcutshall/svelte5-router/llms.txt

Use this file to discover all available pages before exploring further.

svelte5-router is a declarative routing library purpose-built for Svelte 5. It provides Router, Route, and Link components alongside imperative utilities like navigate(), Svelte actions for anchor-based routing, context hooks, and experimental view transitions — all with full TypeScript support and SSR capability.

Installation

Add svelte5-router to your Svelte 5 project in one command.

Quickstart

Build a working multi-page app in minutes with Router, Route, and Link.

Guides

Learn dynamic routes, nested routers, lazy loading, SSR, and more.

API Reference

Full reference for every component, function, action, and hook.

​
What’s included

Router

Top-level context provider that scores and picks the best matching route.

Route

Renders its component or children snippet when the path matches.

Link

Accessible navigation anchor with active-state detection.

navigate()

Imperatively navigate from event handlers and async callbacks.

Lazy loading

Code-split routes with the dynamic() helper.

SSR support

Force the URL server-side via the url prop on Router.

​
Quick example

App.svelte
<script>
  import { Router, Link, Route } from "svelte5-router";
  import Home from "./routes/Home.svelte";
  import About from "./routes/About.svelte";
  import Blog from "./routes/Blog.svelte";
  import BlogPost from "./routes/BlogPost.svelte";

  let url = $state("");
</script>

<Router {url}>
  <nav>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
    <Link to="/blog">Blog</Link>
  </nav>

  <Route path="/blog/:id" component={BlogPost} />
  <Route path="/blog" component={Blog} />
  <Route path="/about" component={About} />
  <Route path="/"><Home /></Route>
</Router>
1

Install the package

npm install svelte5-router
2

Wrap your app in Router

Add a <Router> at the top of your component tree. Pass the url prop for SSR support.
3

Define routes

Use <Route path="..."> to map URL paths to components or children snippets.
4

Add navigation

Use <Link to="..."> for declarative links, or call navigate() for imperative navigation.

Build docs developers (and LLMs) love

Get started for freeTalk to us