DevTools Kit

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 Terminals panel.
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.