Svelte 5 SPA Router 🚀 🔥

An SPA router for Svelte that allows you to divide & conquer your app with nested routers, snippets, and more.

Note

Live demo: https://demo.router.svelte.spa

API documentation: https://docs.router.svelte.spa

Features

• Built for Svelte 5 🚀!
• Divide & conquer - use nested routers all over the place.
• Use components, snippets, or both 🔥!
• Use regex paths (e.g. /foo/(.*?)/bar) and/or named parameters together.
• Use async routes simply with component: async () => import("./my-component.svelte").
• Add hooks to your routes to control the navigation flow 🔧.
• Automagic styling of your anchor tags 💄.
• Helper methods 🛠️ to make your life easier.
• Debugging tools included 🔍.

Latest News

July 1, 2025

Version 2.15.4 released! 🎉 with some healthy updates!

• 🔧 Added support for passing your own props down to the routed component (#70 - thanks @inZaCz).
• 🐛 Fixed a bug where the router would not re-render the same component when the route changes.
• 📊 Added Router Architecture Diagrams to give you a better understanding of how the router works.
• 🎉 New demos for more patterns and use cases at https://demo.router.svelte.spa/patterns.

Note

I'd like to share what svelte5-router is doing in the wild! If you're using it, please share your project with me by sending me a message on discord at @mateothegreat or just create a new issue and I'll add it to the list. 🙏

Installation

npm install @mateothegreat/svelte5-router

Now you can simply:

<a href="/dashboard" use:route>Dashboard</a>

By adding use:route you will prevent the page from reloading and instead let the router take the wheel 🤸. Peruse the rest of the documentation at docs/ for more details.

Note

Without use:route the website will be reloaded after opening a new route. To prevent this use goto() or use:route so only the Route element get's changed.

and /ship-it!

See actions.md#route for the deets..

Table of Contents

• Getting Started
• Routing
• Hooks
• Actions
• Helper Methods
• Default Status Mapping
• The Router Registry
• Route Styling
• Accessing Props
• Debugging
• Diagrams

Note

Include llms.txt in your LLM prompt to get add rich context to your tasks by referencing https://raw.githubusercontent.com/mateothegreat/svelte5-router/refs/heads/main/llms.txt.

How it works

When the browser URL changes, the router instance is triggered. It then registers the route in the registry, evaluates the route matching, and resolves the route.

Note

You can view more diagrams in diagrams.md.