Getting Started

What is Vite DevTools?

Vite DevTools is a devtools framework for the Vite ecosystem. It provides shared infrastructure — a unified dock, type-safe RPC, shared state, flexible UI hosting — so individual tools compose into one consistent UI and authors focus on what makes their integration unique. Any Vite plugin opts in with a devtools.setup hook.

Built-in integrations

Vite DevTools stays dependency-light and advertises its built-in integrations — Rolldown (build analysis: module graphs, chunks, assets, plugins), Vite (plugin inspector), Vitest (test UI), and Oxc (oxlint/oxfmt) — as launchers in the dock. Click one to install its package on demand, then restart the dev server to activate it. Any integration already present in your project is mounted automatically.

Ecosystem

A growing set of integrations already build on Vite DevTools Kit:

• Nuxt DevTools v4 — built on Vite DevTools Kit
• @vitejs/devtools-oxc — first-party Oxc toolchain (oxlint/oxfmt) inspector with custom RPC functions
• UnoCSS Inspector — dock integration for UnoCSS
• vite-plugin-vue-tracer — action button that triggers a DOM inspector

Installation

Vite DevTools is in early preview. Build from source, or install the preview release with the following steps.

Install or upgrade Vite to version 8:

package.json

{
  "dependencies": {
    "vite": "^8.0.0"
  }
}

Install the required DevTools package:

pnpm add -D @vitejs/devtools

Vite DevTools has two client modes. Pick one.

Standalone mode

The DevTools client runs in a standalone window.

Configure vite.config.ts:

vite.config.ts

import { defineConfig } from 'vite'

export default defineConfig({
  devtools: {
    enabled: true,
  },
})

Run:

pnpm build

After the build completes, open the DevTools URL printed in the terminal.

Embedded mode

The DevTools client runs as a floating panel inside the user app.

Configure vite.config.ts:

vite.config.ts

import { DevTools } from '@vitejs/devtools'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    DevTools(),
  ],
  build: {
    rolldownOptions: {
      devtools: {}, // enable devtools mode
    },
  }
})

Run:

pnpm build
pnpm dev

Open your app in the browser; the DevTools panel appears in the corner.

Projects without an HTML entry

For apps where Vite doesn't serve the HTML (JS-only entries, backend integration, middleware mode), import the client injector from a browser entry instead:

import '@vitejs/devtools/client/inject'

See Client Script & Context for how injection works and the full troubleshooting checklist.

Building with the app

Generate a static DevTools build alongside the app build by enabling build.withApp:

vite.config.ts

import { DevTools } from '@vitejs/devtools'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    DevTools({
      build: {
        withApp: true, // generate DevTools output during `vite build`
        // outDir: 'custom-dir', // optional, defaults to Vite's build.outDir
      },
    }),
  ],
  build: {
    rolldownOptions: {
      devtools: {},
    },
  }
})

build.withApp writes the DevTools static output into the build directory using the same build context, so the analysis panels reflect the real build with no separate command.

What's next

• Explore the built-in tools — open the DevTools for Rolldown panels.
• Build custom integrations — extend DevTools with the Vite DevTools Kit.
• Contribute — see the contributing guide.

Architecture

Vite DevTools is built on @vitejs/devtools-kit, the integration hub that owns the dock, command palette, terminal aggregation, and the Plugin.devtools.setup hook every integration uses. Kit in turn builds on Devframe, a framework-neutral foundation that any single tool can use directly — including standalone CLIs, MCP servers, or static dashboards that have no Vite dependency. See Devframe for that path.

Integrations like Nuxt DevTools and the first-party @vitejs/devtools-oxc plug into Kit's plugin API. To extend Vite DevTools, see Vite DevTools Kit.