Skip to content

index.md

Latest commit

 

History

History
103 lines (79 loc) · 4.18 KB

index.md

File metadata and controls

103 lines (79 loc) · 4.18 KB
outline deep

DevTools Kit

[!WARNING] Experimental The API is still in development and may change in any version. If you are building on top of it, please mind the version of packages you are using and warn your users about the experimental status.

The vision of DevTools Kit is to provide a unified foundation for building custom developer tools that integrate seamlessly with Vite and frameworks built on top of it.

We imagine a future where integrations can provide powerful tools for developers and agents to understand your application better, and be composable based on each specific use case:

DevTools Kit Vision

If you are interested in more details, you can also check out Anthony Fu's talk on ViteConf 2025.

What DevTools Kit Provides

DevTools Kit offers a complete toolkit for building DevTools integrations:

Feature Description
Extensible Architecture Simple, well-typed APIs for registering custom visualizations, actions, and interactions
Dock System A unified entry point where users can discover and switch between all DevTools integrations
Built-in RPC Layer Type-safe bidirectional communication between Node.js server and browser clients
Shared State Share data between server and client with automatic synchronization
Isomorphic Views Deploy your UI as embedded panels, browser extensions, or standalone webpages

Architecture Overview

flowchart TB
  subgraph Browser["Browser (Client)"]
    direction TB
    subgraph DockEntries["Dock Entries"]
      Iframe["Iframe Panel"]
      Action["Action Button"]
      Custom["Custom Renderer"]
    end
    RpcClient["RPC Client"]
    DockEntries --> RpcClient
  end

  RpcClient <-->|WebSocket| RpcServer

  subgraph Server["Node.js (Server)"]
    direction TB
    RpcServer["RPC Server"]
    subgraph Context["DevTools Node Context"]
      Docks["Docks Host"]
      Views["Views Host"]
      Rpc["RPC Host"]
      State["State Host"]
    end
    RpcServer --> Context
  end
Loading

Why DevTools Kit?

Traditionally, each framework or tool has had to build its own isolated DevTools from scratch—resulting in duplicated effort, inconsistent user experiences, and maintenance overhead. DevTools Kit changes this by providing a unified, extensible foundation that allows plugin and framework authors to focus on what makes their tools unique, rather than rebuilding common infrastructure.

Whether you're building a framework-specific inspector, a build analysis tool, or a custom debugging interface, DevTools Kit handles the heavy lifting of communication, UI hosting, and integration, so you can focus on delivering value to your users.

Quick Example

Here's a minimal example to add a DevTools panel to your Vite plugin:

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

export default function myPlugin(): Plugin {
  return {
    name: 'my-plugin',
    devtools: {
      setup(ctx) {
        // Register a dock entry that shows an iframe
        ctx.docks.register({
          id: 'my-plugin',
          title: 'My Plugin',
          icon: 'https://example.com/icon.svg',
          type: 'iframe',
          url: 'https://example.com/devtools',
        })
      },
    },
  }
}

Getting Started

If you're building a Vite plugin and want to add DevTools capabilities, or if you're creating a framework-specific DevTools integration, DevTools Kit makes it straightforward:

  1. DevTools Plugin - Learn how to create a DevTools plugin and understand the setup context
  2. Dock System - Create UI panels, action buttons, or custom renderers
  3. RPC - Enable bidirectional communication between server and client
  4. Shared State - Share data between server and client with automatic synchronization

[!TIP] Help Us Improve If you are building something on top of Vite DevTools Kit, we invite you to label your repository with vite-devtools on GitHub to help us track usage and improve the project. Thank you!