https://github.com/mateothegreat/svelte5-router
🫦 An SPA router for Svelte that allows you to divide & conquer your app with nested routers, snippets, and more.
https://github.com/mateothegreat/svelte5-router
spa-router svelte-router svelte5 svelte5-router
Last synced: 5 months ago
JSON representation
🫦 An SPA router for Svelte that allows you to divide & conquer your app with nested routers, snippets, and more.
- Host: GitHub
- URL: https://github.com/mateothegreat/svelte5-router
- Owner: mateothegreat
- License: mit
- Created: 2024-10-28T22:30:58.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-10-29T07:28:03.000Z (9 months ago)
- Last Synced: 2025-12-22T20:52:09.393Z (7 months ago)
- Topics: spa-router, svelte-router, svelte5, svelte5-router
- Language: TypeScript
- Homepage: https://demo.router.svelte.spa
- Size: 16.8 MB
- Stars: 296
- Watchers: 4
- Forks: 19
- Open Issues: 23
-
Metadata Files:
- Readme: docs/readme.md
- License: LICENSE
Awesome Lists containing this project
- awesome-svelte - svelte5-router - First Svelte 5 SPA router with nesting, hooks, and more.. Use components, snippets, or both! (Routers / Internationalization)
README
# 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:
>
> API documentation:
## 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](https://github.com/mateothegreat/svelte5-router/issues/70) - thanks [@inZaCz](https://github.com/inZaCz)).
- 🐛 Fixed a bug where the router would not re-render the same component when the route changes.
- 📊 Added [Router Architecture Diagrams](./diagrams.md) to give you a better understanding of how the router works.
- 🎉 New demos for more patterns and use cases at .
> [!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](https://discord.com/users/505520869246763009) or just create a [new issue](https://github.com/mateothegreat/svelte5-router/issues/new) and I'll add it to the list. 🙏
## Installation
```bash
npm install @mateothegreat/svelte5-router
```
Now you can simply:
```svelte
Dashboard
```
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/](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](actions.md#route) for the deets..
## Table of Contents
- [Getting Started](./getting-started.md)
- [Routing](./routing.md)
- [Hooks](./hooks.md)
- [Actions](./actions.md)
- [Helper Methods](./helpers.md)
- [Default Status Mapping](./statuses.md)
- [The Router Registry](./registry.md)
- [Route Styling](./styling.md)
- [Accessing Props](./props.md)
- [Debugging](./debugging.md)
- [Diagrams](./diagrams.md)
> [!NOTE]
> Include [llms.txt](../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](./diagrams.md).