vite-devtools-svelte v0.6.2

Svelte 5 · SvelteKit · Vite

See inside your Svelte app.

Components, reactivity, routes and compiled output in one DevTools UI, served by your Vite dev server.

Get started View on GitHub
npm install -D vite-devtools-svelte
  1. Add svelteDevtools() before sveltekit() in vite.config.ts.
  2. Run your dev server.
  3. Open /.svelte-devtools/.

Requires vite-devtools-svelte ≥ 0.4.0. Versions up to 0.3.x are documented to run inside @vitejs/devtools.

Components panel: a filtered live component tree of a large app with an inspector showing ancestors, children and imports Components panel in the light theme with the component inspector open
Components: the live tree stays virtualized on large apps and tells you when only part of it was captured. Captured from the UI in dev-mock mode with synthetic data, before the reactivity update.

What you can see

Your running app, panel by panel.

The panels read your running app and your project while the dev server runs. Production builds are unaffected.

  • Components

    The live tree of mounted instances, virtualized for large apps, with an inspector for ancestors, children and imports.

    Panel details

  • Reactivity

    Which $state, $derived and $effect connect inside one component. Edges mean “can affect”, not a recorded cause.

    Panel details

  • State timeline

    Sampled $state changes, newest first, with the value before and after.

    Panel details

  • Compiled output

    Your component next to the JavaScript the compiler wrote, linked line by line through the source map.

    Panel details

  • Routes and load functions

    The SvelteKit routes tree from your files, and how long each load function takes.

    Panel details

  • Render

    Which components render most and take the longest, per instance.

    Panel details

Reactivity in large apps

Start from the busiest components, then zoom in.

The overview counts sampled state changes and renders per component without building the whole graph. Pick one instance to see its signals and what can affect what.

  • Every view says what it covers: window, 200 ms sampling, caps.
  • Edges mean “can affect”. Which write changed a value is not recorded.
  • After a page reload, old component ids are refused instead of guessed.
The Reactivity panel
Local graph of ReactivePriceChart with taxRate selected; the inspector says Cause: Not recorded
Real runtime on the synthetic example app, captured in CI.
State timeline panel listing state changes with an inspector showing before and after values

Know what changed, and when.

Recent $state writes, newest first, with the value before and after. The log keeps the latest entries, not the whole session.

Dev-mock mode with synthetic data, before the reactivity update.

Compiled output panel with Svelte source and compiled JavaScript side by side, connected by source-map lines

Read what the compiler wrote.

Your component next to its compiled JavaScript, linked line by line through the source map.

Dev-mock mode with synthetic data, before the reactivity update.

For AI agents

Your coding agent can read it too.

The dev server also serves an MCP endpoint with 20 read tools. Claude Code and other MCP clients get the same data as the panels, and every answer says what it covers.

Read the MCP guide

Two ways to open it

Standalone, or inside Vite DevTools.

Standalone

Add the plugin and open /.svelte-devtools/. The first visit asks for the one-time code printed in your terminal; after that the browser is trusted.

Vite DevTools dock

Install @vitejs/devtools ≥ 0.7.6 and add DevTools() to your Vite config: the same panels open as an entry in the Vite DevTools dock.

15 panels

Every panel.

Try it in your dev server.

Get started View on GitHub