vite-devtools-svelte v0.1.0
§ setup · getting started ~3 minutes

Getting Started.

Add the plugin to a Svelte 5 + SvelteKit project running on Vite 8 or later. The plugin is dev-only — production builds are unaffected.

Requirements

Vite
≥ 8.0.0
Svelte
5 (runes mode)
SvelteKit
recommended for full feature set
01

Install

bash bash 
npm install -D vite-devtools-svelte
02

Configure Vite

Add the plugin to your vite.config.ts. It must come before sveltekit() so its transforms run before the Svelte compiler.

vite.config.ts ts 
import { svelteDevtools } from 'vite-devtools-svelte'
import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    svelteDevtools(),
    sveltekit(),
  ],
})
03

Run the dev server

bash bash 
npm run dev

Open the Vite DevTools UI in your browser. The Svelte panels appear in the sidebar.

04

Options

ts ts 
svelteDevtools({
  // Enable component lifecycle tracking (default: true)
  componentTracking: true,
})

Next steps