DevTools Kit

Experimental

The API is still in development and may change in any release. Pin the package version and let your users know they're on an experimental surface.

DevTools Kit is the integration hub for Vite DevTools. It owns the dock, the command palette, terminal aggregation, cross-tool toasts, and the Plugin.devtools.setup hook that any Vite plugin can implement to surface a UI inside DevTools.

For a fresh Vite-specific integration, reach for Plugin.devtools.setup directly — that's where docks, terminals, the palette, and custom renderers live. Kit is built on Devframe, the framework-neutral foundation; tools that already have a portable Devframe definition drop into the hub via createPluginFromDevframe, and standalone single-tool deployments can build on Devframe directly.

For background, see Anthony Fu's ViteConf 2025 talk.

What DevTools Kit provides

Kit owns the hub-level surface — the things that only matter once multiple integrations share a UI:

Feature	Description
DevTools Plugin	The Plugin.devtools.setup hook, plus createPluginFromDevframe for porting Devframe apps into the hub.
Dock System	The unified dock — iframe / action / custom / launcher / json-render entries — with categories, when-clauses, and remote dock support.
Commands	The shared command palette: keybindings, children, when-gating across every integration.
Messages	Cross-tool toast notifications and the unified messages dock.
Terminals	Aggregate terminal output from any integration into one xterm.js view.
RPC	Type-safe bidirectional RPC backed by Devframe's birpc + valibot.
Shared State	Patch-synced state that bridges server ↔ client across every integration.
Isomorphic Views	Deploy your UI as embedded panels, browser extensions, or standalone webpages.

Architecture Overview

Quick example

Authoring a Vite plugin? Add a devtools.setup hook and register a dock entry:

/// <reference types="@vitejs/devtools-kit" />
import type { Plugin } from 'vite'

export default function myPlugin(): Plugin {
  return {
    name: 'my-plugin',
    devtools: {
      setup(ctx) {
        // ctx is the kit-augmented context: rpc + docks + terminals + messages + commands
        ctx.docks.register({
          id: 'my-plugin',
          title: 'My Plugin',
          icon: 'https://example.com/icon.svg',
          type: 'iframe',
          url: 'https://example.com/devtools',
        })
      },
    },
  }
}

Already have a portable Devframe app? Wrap it once and Kit synthesises the iframe dock entry from the definition's id / name / icon / basePath:

// vite.config.ts
import { createPluginFromDevframe } from '@vitejs/devtools-kit/node'
import devtool from './my-devtool'

export default {
  plugins: [
    createPluginFromDevframe(devtool, {
      // Optional kit-only setup for hub features:
      setup(ctx) {
        ctx.commands.register({
          id: 'my-devtool:clear-cache',
          title: 'Clear Cache',
          handler: () => { /* ... */ },
        })
      },
    }),
  ],
}

Getting started

1. DevTools Plugin — register a hub plugin and walk the kit-augmented context.
2. Dock System — iframe panels, action buttons, custom renderers, launchers, json-render specs.
3. RPC — bidirectional, type-safe communication between server and client.
4. Shared State — patch-synced state that bridges every integration.

If you're shipping something on Kit, tag the repo with vite-devtools on GitHub so we can see what folks are building.