Getting Started

Installation

bun add @mdrv/arc

or with npm:

npm install @mdrv/arc

Basic Setup

1. Define Your Routes

// routes.ts
import { createRouter } from '@mdrv/arc'
import Home from './pages/home.svelte'
import About from './pages/about.svelte'

export const { navigate, route, isActive } = createRouter({
  routes: {
    '/': Home,
    '/about': About,
    '/users/:id': () => import('./pages/user.svelte'),
  }
})

2. Add Router to Your App

<!-- App.svelte -->
<script>
  import { Router, generateTransitionCSS } from '@mdrv/arc'
</script>

<svelte:head>
  <style>{@html generateTransitionCSS()}</style>
</svelte:head>

<Router />

3. Navigate with Transitions

<script>
  import { navigate, transitionPresets } from '@mdrv/arc'
</script>

<!-- Simple link -->
<a href="/about">About</a>

<!-- With custom transition -->
<button on:click={() => navigate('/about', {
  transition: transitionPresets.fade()
})}>
  Go to About
</button>

Next Steps