vite-devtools-svelte Svelte Themes

Vite Devtools Svelte

Svelte 5 DevTools — works as a Vite DevTools plugin or standalone

Demo Download

vite-devtools-svelte

Svelte DevTools plugin for Vite DevTools. Provides 15 specialized panels for debugging, profiling, and inspecting Svelte/SvelteKit applications — all integrated directly into the Vite DevTools UI.

Status: Early development (v0.0.1). APIs may change.

Features

  • Component Inspector — View component hierarchy, props, state, and reactive values in real-time
  • Reactive Graph — Visualize $state, $derived, and $effect dependencies as an interactive DAG
  • Render Profiler — Track component render counts, render times, and identify bottlenecks
  • Route Viewer — Explore SvelteKit file-based routing structure with dynamic parameters
  • Load Profiler — Monitor SvelteKit load functions with waterfall visualization
  • State Timeline — Record and replay state changes across the application
  • API Playground — Test SvelteKit server endpoints (+server.ts) directly from DevTools
  • Error Dashboard — Centralized view of compiler warnings and runtime errors
  • Code Inspector — View compiled Svelte output with source mapping
  • Module Graph — Visualize module dependencies and detect circular imports
  • OG Preview — Preview Open Graph meta tags for SEO validation
  • Build Analysis — Analyze build chunks and bundle composition
  • FPS Monitor — Real-time frame rate monitoring with historical data
  • Asset Browser — Browse and preview static assets with metadata
  • Overview — Project summary with versions and dependency info

Screenshots

Overview

Components

Routes

Assets

Render Profiler

Reactive Graph

FPS Monitor

Load Profiler

State Timeline

API Playground

Errors & Warnings

Code Inspector

Module Graph

OG Preview

Build Analysis

Requirements

  • Vite >= 8.0.0
  • Svelte 5 (runes mode)
  • SvelteKit (recommended, but not required for basic features)
  • @vitejs/devtools — the host UI this plugin's panels render inside

Installation

vite-devtools-svelte is a panel provider — it needs the @vitejs/devtools host plugin to render its UI. Install both:

npm install -D vite-devtools-svelte @vitejs/devtools

Setup

Register both plugins in your vite.config.ts. svelteDevtools() must come before sveltekit() so that its transforms run before the Svelte compiler.

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

export default defineConfig({
  plugins: [
    svelteDevtools(), // must come before sveltekit()
    DevTools(),       // the @vitejs/devtools host — without it the panels have nowhere to render
    sveltekit(),
  ],
})

Then start your dev server as usual:

npm run dev

Open your app in the browser. The Vite DevTools drawer appears at the bottom edge of the page — click the floating handle to open it, then switch to the Svelte tab to see the panels provided by this plugin.

[!NOTE] If you only register svelteDevtools() without DevTools() from @vitejs/devtools, the dev server starts fine but no DevTools UI appears — there is no host for the panels to mount into. See examples/sample-app for a minimal working setup.

Options

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

How It Works

The plugin uses a virtual module architecture instead of fragile regex transforms:

  1. Runtime wrapper — Intercepts svelte/internal/client to track component lifecycle and reactive signals ($state, $derived, $effect)
  2. HMR channel — Streams runtime data (component tree, render profiles, reactive graph) from the browser to the dev server via WebSocket
  3. Static analyzers — Extract routes, component relations, assets, and project metadata from the filesystem
  4. Dual transport RPC — DevTools Kit RPC with HTTP fallback for compatibility

The plugin is development-only — it adds zero overhead to production builds.

AI access (MCP)

The plugin exposes an MCP (Model Context Protocol) endpoint so AI agents such as Claude Code can read performance metrics and run measurement sessions autonomously. The intent: surface the same data the panels show, in a shape an agent can act on — and let the agent's own file-editing tools propose fixes.

On dev-server startup the plugin prints a copy-pasteable registration command:

svelte-devtools MCP ready — register with Claude Code:
  claude mcp add --transport http svelte http://localhost:5173/__svelte-devtools/mcp --header x-svelte-devtools-token:<token>

The endpoint is gated by the same per-process random token used by the panel UI. The token rotates every dev-server start, so you'll re-register after a restart.

Tools exposed

Tool Purpose
list_performance_issues Cross-cuts render / reactive / load / fps and returns ranked issues with suggestedTool for drill-down. Entry point.
get_component_hotspots Top components by total render time.
get_reactive_graph_problems Classified reactive-graph issues (over-connected effects, orphan deriveds, isolated nodes).
get_load_waterfall SvelteKit load timings grouped by route.
get_fps_drops FPS samples below threshold.
get_render_profile Render profile entries for a specific file.
start_session, end_session, compare_sessions Bracket a measurement window so the agent can diff before/after a fix. persist:true writes the session to node_modules/.vite-devtools-svelte/sessions/.
list_sessions, load_session, delete_session Session inspection / cleanup. The agent owns disposal — the plugin never auto-persists.

Skills

Two Claude Code skills ship under node_modules/vite-devtools-svelte/skills/:

  • vite-devtools-svelte:perf-audit — captures a baseline session, calls list_performance_issues, and presents the top issues for the user to triage.
  • vite-devtools-svelte:perf-fix — one issue per run: baseline → edit → after → compare_sessions, with verdict reported verbatim and an explicit revert path if the change regresses or has no effect.

Skill names are namespaced with vite-devtools-svelte: so they don't collide with other skills in your .claude/skills/.

To install for a given project:

mkdir -p .claude/skills
cp -r node_modules/vite-devtools-svelte/skills/* .claude/skills/

Scope

The MCP server is read + measure only — it never edits files. Editing is left to the agent's own tools (Claude Code's Edit/Write), which keeps the permission boundary clean and lets git own rollback.

Security model

The DevTools backend exposes a small set of dev-only HTTP endpoints (/__svelte-devtools/rpc, /__svelte-devtools/asset) to drive the panel UI. Some of those endpoints can read files from disk or open them in your editor, so we treat them as authenticated even though the dev server is normally only reachable from localhost.

  • Per-process random token. On every dev-server start the plugin generates a fresh UUID and injects it into the DevTools UI HTML as a <meta> tag. The HTTP fallback RPC and the asset middleware require that token in the x-svelte-devtools-token header, plus a same-origin Origin/Referer. Cross-origin requests, requests with the wrong token, and requests without Content-Type: application/json are rejected with 403 / 415. Bodies above 1 MB are rejected with 413.
  • Path sandbox. inspect-file, open-in-editor, and open-reactive-in-editor resolve their input through fs.realpath() and refuse anything outside the project root, so a hostile RPC caller cannot read /etc/passwd or your ~/.ssh/ files even if they get past the token check. Symlinks inside the project are followed normally.
  • SSRF defenses. Outbound fetches from send-api-request and the OG-preview RPC block 127.0.0.0/8 / 10.0.0.0/8 / 172.16.0.0/12 / 192.168.0.0/16 / 169.254.0.0/16 / IPv6 loopback / localhost / *.local / *.internal.
  • Dev-only by construction. Both the runtime virtual module and the svelte/internal/client wrapper are gated on config.command === 'serve' and never resolve during a production build, so none of this surface ships to end users.

If you bind your dev server to 0.0.0.0 (e.g. vite --host), the same-origin check still blocks LAN browsers from invoking RPC, but anyone on the LAN can still see the panel UI itself. Treat that as you would any unauthenticated dev tool: don't run it on networks you don't trust.

Development

This is a pnpm monorepo.

# Install dependencies
pnpm install

# Build everything
pnpm build

# Run the playground app with DevTools
pnpm dev

# Run tests
pnpm -C packages/vite-devtools-svelte test

# Watch mode
pnpm -C packages/vite-devtools-svelte test:watch

# Lint and format (oxlint / oxfmt)
pnpm lint
pnpm format

Reproducible environment with Nix (optional)

A Nix flake is provided so every contributor can pin the exact Node.js toolchain. With Nix installed:

nix develop                # drop into a shell with Node 24 + corepack

If you use direnv, direnv allow in the repo root will do this automatically. The shell uses corepack to materialize the pnpm version declared by the packageManager field in package.json, so pnpm --version matches across machines.

Project Structure

├── packages/vite-devtools-svelte/
│   ├── src/              # Plugin core (Vite plugin, runtime, analyzers)
│   ├── client/           # DevTools UI (Svelte 5 SPA)
│   └── dist/             # Build output
├── playground/           # Demo SvelteKit app for development
└── docs/images/          # Screenshots

Contributing

Contributions are welcome! Please open an issue first to discuss what you'd like to change.

License

MIT

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes