Live Examples

Interact with these live examples to see @mdrv/arc in action. All demos use actual Svelte 5 components with the router.

Basic

Basic Router Demo

This example shows a simple router with three pages and fade transitions. Click the buttons to navigate between pages and see smooth transitions powered by the View Transition API.

Current path: /

Home Page

Welcome to the @mdrv/arc router demo!

This is a live example showing smooth page transitions with the View Transition API.

Show code

import { createRouter, transitionPresets } from '@mdrv/arc'

const { navigate, route } = createRouter({
  routes: {
    '/': Home,
    '/about': About,
    '/contact': Contact,
  }
})

// Navigate with transition
function handleNavigate(path) {
  navigate(path, {
    transition: transitionPresets.fade()
  })
}

Transitions

Transition Presets

Explore different transition types: fade, slide, scale, and material. Each preset provides a different animation effect. Select a transition type from the dropdown and navigate between pages to see how it looks.

Transition Type:

Current path: /a

Transition: fade

Page A

This is Page A. Try switching between pages with different transition types!

Each transition preset provides a different animation effect:

Fade - Simple opacity transition
Slide - Slides in from the side
Scale - Scales up/down
Material - Material Design-style transition

Show code

import { createRouter, transitionPresets } from '@mdrv/arc'

const { navigate, route } = createRouter({
  routes: {
    '/a': PageA,
    '/b': PageB,
  }
})

// Use different transition presets
const transitions = {
  fade: transitionPresets.fade(),
  slide: transitionPresets.slide(),
  scale: transitionPresets.scale(),
  material: transitionPresets.material(),
}

navigate('/b', {
  transition: transitions.slide
})

Direction-Aware Transitions

This example shows how to detect navigation direction (forward/backward) and apply different transition effects. Navigate through the steps to see how the slide direction changes based on your movement.

Navigation direction: forward

Current path: /step1

The slide direction changes based on whether you're moving forward or backward through the steps!

Step 1

This is the first step in a multi-step process.

When you navigate to Step 2, the page will slide left (forward direction).

When you return here from Step 2, it will slide right (backward direction).

Show code

import { createRouter, detectNavigationDirection, transitionPresets } from '@mdrv/arc'

const { navigate, route } = createRouter({
  routes: {
    '/step1': Step1,
    '/step2': Step2,
    '/step3': Step3,
  }
})

function handleNavigate(path) {
  const direction = detectNavigationDirection(route.pathname, path)
  
  navigate(path, {
    transition: direction === 'forward' 
      ? transitionPresets.slide({ direction: 'left' })
      : transitionPresets.slide({ direction: 'right' }),
  })
}

Advanced

Nested Routes with Layouts

Demonstrate nested routing where layout components persist across route changes. Notice how the sidebar remains visible while the content area updates. This is useful for building apps with consistent navigation or sidebars.

Current path: /

Select a page to see the layout with sidebar.

Show code

import { createRouter } from '@mdrv/arc'
import Router from '@mdrv/arc/router.svelte'

const { navigate, route } = createRouter({
  routes: {
    '/': Layout,
    '/dashboard': [Layout, Dashboard],
    '/profile': [Layout, Profile],
    '/settings': [Layout, Settings],
  }
})

// Layout.svelte - wraps child routes
<div class="layout">
  <div class="sidebar">Persistent sidebar</div>
  <div class="content">
    <Router /> <!-- Child route renders here -->
  </div>
</div>

Dynamic Route Parameters

Learn how to use dynamic route parameters to build detail pages. The router extracts parameters from the URL and passes them to your components. Try clicking different user/product buttons to see the params change.

Current path: /

User List

Click on a user button above to view their details with dynamic parameters!

User 123 - John Doe

User 456 - Jane Smith

Show code

import { createRouter } from '@mdrv/arc'

const { navigate, route } = createRouter({
  routes: {
    '/': UserList,
    '/user/:id': UserDetail,
    '/product/:category/:id': ProductDetail,
  }
})

// UserDetail.svelte - receives params as props
<script>
  let { params } = $props() // { id: '123' }
</script>

<p>User ID: {params.id}</p>

// Navigate with params
navigate('/user/456')