A router for Svelte.js

Usage no npm install needed!

<script type="module">
  import svelRouter from 'https://cdn.skypack.dev/@svel/router';


svelte-router Build Status

This is svelte-router which works only with svelte 3.0.


svelte-router is a router for svelte.js. It was forked from vue-router.And has the similar APIs and features:

  • Nested route/view mapping
  • Modular, component-based router configuration
  • Route params, query, wildcards
  • View transition effects powered by svelte.js' transition system
  • Fine-grained navigation control (in-component-guards is not support now)
  • Links with automatic active CSS classes
  • HTML5 history mode or hash mode, with auto-fallback in IE9
  • Customizable Scroll Behavior

Get started with the vue-router documentation, or play with the examples (see how to run them below).


npm i @svel/router


import {HistoryRouter, RouterProvider, RouterLink, RouterView} from '@svel/router'
import Home from '../views/Home.svelte'
import Foo from '../views/Foo.svelte'
import Bar from '../views/Bar.svelte'

const router = new HistoryRouter({
  base: '/',
  routes: [
    { path: '/', component: Home },
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }

<RouterProvider {router}>
  <div id="app">
    <h1>Svelte Router</h1>
      <li><RouterLink to="/">/</RouterLink></li>
      <li><RouterLink to="/foo">/foo</RouterLink></li>
      <li><RouterLink to="/bar">/bar</RouterLink></li>
    <RouterView />

Development Setup

# install deps
npm install

# build dist files
npm run build

# serve examples at localhost:8080
npm run dev

# lint & run all tests
npm test

# serve docs at localhost:8080
npm run docs


  • npm run release
    • Ensure tests are passing npm test
    • Build dist files VERSION=<the_version> npm run build
    • Build changelog npm run changelod
    • Commit dist files git add dist CHANGELOG.md && git commit -m "[build $VERSION]"
    • Publish a new version `npm version $VERSION --message "[release] $VERSION"
    • Push tags git push origin refs/tags/v$VERSION && git push
    • Publish to npm npm publish


Please make sure to read the Contributing Guide before making a pull request.


Details changes for each release are documented in the release notes.



Copyright (c) 2013-present Evan You