# vitejs/devtools architecture

> Architecture diagram of the GitHub repository vitejs/devtools, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/vitejs/devtools
- Repository: https://github.com/vitejs/devtools

## Overview

1. **What this repo is**
   - This is a **pnpm monorepo** for the Vite DevTools ecosystem.
   - The main product is a **developer tooling platform** that visualizes Vite/Rolldown internal state, build graphs, messages, terminals, and plugin data.
   - The repo is split into reusable packages, feature-specific apps, examples, docs, and automated tests.

2. **Primary architecture pattern**
   - The core design is a **node-side plugin/runtime paired with a client-side UI**.
   - Data is collected in the host process, exposed through **RPC/state channels**, and rendered in a browser-based UI.
   - Several packages follow the same pattern: a `node` layer gathers data, and an `app` or `client` layer renders it.

3. **`packages/kit`: the shared SDK boundary**
   - `packages/kit` is the main abstraction layer for plugin authors.
   - It defines the **public API, types, utilities, and shared-state primitives** used by other packages.
   - It also contains client-side helpers for remote interaction and node-side helpers for creating devtools plugins from a Vite-style host context.
   - Architecturally, this package is the **contract layer** between integrations and the core UI/runtime.

4. **`packages/core`: the central runtime**
   - `packages/core` is the largest and most central package.
   - Its **node side** contains CLI entrypoints, config, diagnostics, HTTPS, WebSocket transport, plugin registration, server startup, and RPC endpoints.
   - Its **client side** contains the main devtools UI built from web components, including docks, command palette, messages, terminals, settings, toasts, JSON rendering, and floating UI.
   - It supports both **injection into another app** and a **standalone mode**, which is an important deployment boundary.

5. **Core data flow**
   - The node runtime collects diagnostics and runtime state, then publishes it through RPC and socket-based mechanisms.
   - The client layer consumes that state and organizes it into dockable panels and views.
   - Core’s internal state managers cover commands, docks, messages, terminals, confirmations, keybindings, popups, and persistent view state, which are the main interaction surfaces of the UI.

6. **UI system and rendering model**
   - The core client UI is implemented with a **web components / Vue-based component system**.
   - It has distinct subdomains for:
     - dock layout and panel management,
     - built-in views like settings/messages/terminals,
     - JSON renderers for structured objects,
     - floating popovers/tooltips,
     - icons and display primitives.
   - This makes the UI layer modular: the shell orchestrates layout while specific views render the actual data domains.

7. **`packages/ui`: shared design primitives**
   - `packages/ui` is a smaller cross-package UI toolkit.
   - It provides reusable visual components, composables, CSS, and UnoCSS configuration.
   - This package is a **presentation dependency** rather than a runtime boundary; it standardizes look-and-feel across the ecosystem.

8. **Feature packages: Vite, Rolldown, Self-Inspect**
   - `packages/vite` is a Vite-specific surface that exposes Vite environment and metadata info through RPC and renders a dedicated app.
   - `packages/rolldown` is the build-analysis product: it has a richer application with session history, graph views, compare views, assets/chunks/modules/packages/plugins pages, and a worker for diffing.
   - `packages/self-inspect` introspects the devtools itself, showing auth tokens, client scripts, registered plugins, docks, RPC functions, and shared-state keys.
   - These packages share the same general shape: **node RPC endpoints + client app pages/components + shared types**.

9. **Rolldown-specific architecture**
   - Rolldown is the most data-heavy subsystem.
   - Its node side stores and reads build events/logs, manages sessions, and serves RPC endpoints for assets, chunks, modules, packages, plugins, and compare summaries.
   - Its app side contains pages and specialized visualizations such as flamegraphs, treemaps, module flowmaps, graph views, search, and compare dashboards.
   - A worker is used for diff computation, which keeps expensive comparison logic off the main UI thread.

10. **`packages/webext`: browser-extension packaging**
   - `packages/webext` is the browser extension shell that wraps the devtools into extension targets.
   - It contains background scripts, devtools panel/background pages, proxy/window coordination, and build scripts.
   - This is the deployment layer for browser-based embedding, separate from the core rendering logic.

11. **Examples as integration references**
   - The `examples/` directory contains concrete plugin examples such as accessibility checking, file explorer, and git UI.
   - Each example is split into a **node plugin/backend** and a **playground UI** for manual testing.
   - These examples are important because they show how third-party tooling integrates with the kit/core contracts.

12. **Testing and validation layers**
   - `e2e/` contains end-to-end tests with a minimal Vite fixture to validate real integration behavior.
   - `packages/*/__tests__` and `test/` cover package-level behavior and API snapshots.
   - This suggests the repo treats both **public API stability** and **runtime integration behavior** as first-class concerns.

13. **Documentation and release infrastructure**
   - `docs/` is a full VitePress documentation site, including guides, kit docs, Rolldown docs, and error references.
   - `.github/workflows` and the release scripts show automated CI/release pipelines, which matter because this repo ships multiple packages and generated artifacts.
   - The repo is organized for publishable packages, not just a single app.

14. **How to draw the architecture**
   - The clearest diagram is a layered system:
     - **Host integrations / plugins** at the edge,
     - **Kit contracts** in the middle,
     - **Node runtimes** that collect state and expose RPC,
     - **Client apps/UI shells** that render data,
     - and **deployment shells** like the browser extension, standalone app, or example playgrounds.
   - The main data path is: **host/build process → node plugin/runtime → RPC/shared state → client UI components/views**.

Main entry points: [`packages/core/src/node/cli.ts`](https://github.com/vitejs/devtools/blob/main/packages/core/src/node/cli.ts) (Node Runtime), [`packages/core/src/client/webcomponents/index.ts`](https://github.com/vitejs/devtools/blob/main/packages/core/src/client/webcomponents/index.ts) (Client Shell), [`packages/core/src/node/rpc/index.ts`](https://github.com/vitejs/devtools/blob/main/packages/core/src/node/rpc/index.ts) (Core RPC), [`packages/kit/src/index.ts`](https://github.com/vitejs/devtools/blob/main/packages/kit/src/index.ts) (Kit SDK)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_group_contracts["Contracts"]
  node_node_kit["Kit SDK<br/>shared contract<br/>[index.ts]"]
  node_node_kit_shared_state["Shared State<br/>state primitives<br/>[shared-state.ts]"]
  node_node_ui["UI Toolkit<br/>ui primitives<br/>[index.ts]"]
end

subgraph group_group_core["Core Runtime"]
  node_node_core_node["Node Runtime<br/>host runtime<br/>[cli.ts]"]
  node_node_core_rpc["Core RPC<br/>rpc surface<br/>[index.ts]"]
  node_node_core_plugins["Core Plugins<br/>integration hooks<br/>[index.ts]"]
  node_node_core_client["Client Shell<br/>ui shell<br/>[index.ts]"]
  node_node_core_dock["Dock System<br/>layout manager<br/>[Dock.vue]"]
  node_node_core_views["Builtin Views<br/>view layer"]
  node_node_core_json["JSON Render<br/>renderer<br/>[index.ts]"]
  node_node_core_state["UI State<br/>client state<br/>[commands.ts]"]
end

subgraph group_group_features["Feature Apps"]
  node_node_vite["Vite App<br/>vite surface<br/>[index.ts]"]
  node_node_rolldown_node["Rolldown Node<br/>analysis backend<br/>[index.ts]"]
  node_node_rolldown_app["Rolldown App<br/>analysis ui<br/>[app.vue]"]
  node_node_rolldown_worker(("Diff Worker<br/>compute worker<br/>[diff.worker.ts]"))
  node_node_self_node["Inspect Node<br/>inspection backend<br/>[index.ts]"]
  node_node_self_app["Inspect App<br/>inspection ui<br/>[app.vue]"]
end

subgraph group_group_delivery["Delivery"]
  node_node_webext["Web Extension<br/>deployment shell<br/>[background.ts]"]
  node_node_examples["Examples<br/>integration samples<br/>[index.ts]"]
  node_node_docs["Docs Site<br/>documentation<br/>[config.ts]"]
  node_node_e2e["E2E Tests<br/>validation<br/>[harness.ts]"]
end

node_node_kit -->|"plugin API"| node_node_core_node
node_node_kit -->|"vite integration"| node_node_vite
node_node_kit -->|"example plugins"| node_node_examples
node_node_kit_shared_state -->|"shared state"| node_node_core_state
node_node_ui -->|"visual system"| node_node_core_client
node_node_ui -->|"design system"| node_node_rolldown_app
node_node_ui -->|"shared visuals"| node_node_self_app
node_node_core_node -->|"serves rpc"| node_node_core_rpc
node_node_core_node -->|"loads plugins"| node_node_core_plugins
node_node_core_rpc -->|"state delivery"| node_node_core_client
node_node_core_plugins -->|"embed/extend"| node_node_webext
node_node_core_client -->|"layout"| node_node_core_dock
node_node_core_client -->|"panels"| node_node_core_views
node_node_core_views -->|"structured render"| node_node_core_json
node_node_core_state -->|"view state"| node_node_core_dock
node_node_core_state -->|"ui actions"| node_node_core_views
node_node_rolldown_node -->|"rpc data"| node_node_core_rpc
node_node_rolldown_node -->|"diff jobs"| node_node_rolldown_worker
node_node_rolldown_app -->|"compare ui"| node_node_rolldown_worker
node_node_self_node -->|"inspection rpc"| node_node_core_rpc
node_node_self_app -->|"inspect data"| node_node_self_node
node_node_vite -->|"host state"| node_node_core_rpc
node_node_webext -->|"hosts ui"| node_node_core_client
node_node_examples -.->|"reference flows"| node_node_e2e
node_node_docs -->|"usage docs"| node_node_kit
node_node_docs -->|"runtime docs"| node_node_core_node
node_node_e2e -->|"integration check"| node_node_core_node

click node_node_kit "https://github.com/vitejs/devtools/blob/main/packages/kit/src/index.ts"
click node_node_kit_shared_state "https://github.com/vitejs/devtools/blob/main/packages/kit/src/utils/shared-state.ts"
click node_node_ui "https://github.com/vitejs/devtools/blob/main/packages/ui/src/index.ts"
click node_node_core_node "https://github.com/vitejs/devtools/blob/main/packages/core/src/node/cli.ts"
click node_node_core_rpc "https://github.com/vitejs/devtools/blob/main/packages/core/src/node/rpc/index.ts"
click node_node_core_plugins "https://github.com/vitejs/devtools/blob/main/packages/core/src/node/plugins/index.ts"
click node_node_core_client "https://github.com/vitejs/devtools/blob/main/packages/core/src/client/webcomponents/index.ts"
click node_node_core_dock "https://github.com/vitejs/devtools/blob/main/packages/core/src/client/webcomponents/components/dock/Dock.vue"
click node_node_core_views "https://github.com/vitejs/devtools/blob/main/packages/core/src/client/webcomponents/components/views-builtin/ViewBuiltinSettings.vue"
click node_node_core_json "https://github.com/vitejs/devtools/blob/main/packages/core/src/client/webcomponents/json-render/index.ts"
click node_node_core_state "https://github.com/vitejs/devtools/blob/main/packages/core/src/client/webcomponents/state/commands.ts"
click node_node_vite "https://github.com/vitejs/devtools/blob/main/packages/vite/src/index.ts"
click node_node_rolldown_node "https://github.com/vitejs/devtools/blob/main/packages/rolldown/src/node/index.ts"
click node_node_rolldown_app "https://github.com/vitejs/devtools/blob/main/packages/rolldown/src/app/app.vue"
click node_node_rolldown_worker "https://github.com/vitejs/devtools/blob/main/packages/rolldown/src/app/worker/diff.worker.ts"
click node_node_self_node "https://github.com/vitejs/devtools/blob/main/packages/self-inspect/src/node/index.ts"
click node_node_self_app "https://github.com/vitejs/devtools/blob/main/packages/self-inspect/src/app/app.vue"
click node_node_webext "https://github.com/vitejs/devtools/blob/main/packages/webext/src/background.ts"
click node_node_examples "https://github.com/vitejs/devtools/blob/main/examples/plugin-file-explorer/src/node/index.ts"
click node_node_docs "https://github.com/vitejs/devtools/blob/main/docs/.vitepress/config.ts"
click node_node_e2e "https://github.com/vitejs/devtools/blob/main/e2e/src/harness.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_node_kit,node_node_kit_shared_state,node_node_ui toneBlue
class node_node_core_node,node_node_core_rpc,node_node_core_plugins,node_node_core_client,node_node_core_dock,node_node_core_views,node_node_core_json,node_node_core_state toneAmber
class node_node_vite,node_node_rolldown_node,node_node_rolldown_app,node_node_rolldown_worker,node_node_self_node,node_node_self_app toneMint
class node_node_webext,node_node_examples,node_node_docs,node_node_e2e toneRose
```

## Components

### Contracts

Shared SDK and UI primitives

- [Kit SDK](https://github.com/vitejs/devtools/blob/main/packages/kit/src/index.ts): shared contract · Public API, types, remote client, and node-side plugin helpers · `packages/kit/src/index.ts`
- [Shared State](https://github.com/vitejs/devtools/blob/main/packages/kit/src/utils/shared-state.ts): state primitives · Shared-state and event helpers used across integrations · `packages/kit/src/utils/shared-state.ts`
- [UI Toolkit](https://github.com/vitejs/devtools/blob/main/packages/ui/src/index.ts): ui primitives · Cross-package visual components, composables, and UnoCSS theme · `packages/ui/src/index.ts`

### Core Runtime

Central devtools runtime and client shell

- [Node Runtime](https://github.com/vitejs/devtools/blob/main/packages/core/src/node/cli.ts): host runtime · CLI, config, diagnostics, transport, plugin registration, and RPC server · `packages/core/src/node/cli.ts`
- [Core RPC](https://github.com/vitejs/devtools/blob/main/packages/core/src/node/rpc/index.ts): rpc surface · Public and internal RPC endpoints for commands, messages, terminals, auth, and editor/finder actions · `packages/core/src/node/rpc/index.ts`
- [Core Plugins](https://github.com/vitejs/devtools/blob/main/packages/core/src/node/plugins/index.ts): integration hooks · Build, injection, server, and integration plugins that wire the runtime into hosts · `packages/core/src/node/plugins/index.ts`
- [Client Shell](https://github.com/vitejs/devtools/blob/main/packages/core/src/client/webcomponents/index.ts): ui shell · Injectable and standalone client entrypoints for the main devtools UI · `packages/core/src/client/webcomponents/index.ts`
- [Dock System](https://github.com/vitejs/devtools/blob/main/packages/core/src/client/webcomponents/components/dock/Dock.vue): layout manager · Dock layout, entries, panels, groups, and sidebar orchestration · `packages/core/src/client/webcomponents/components/dock/Dock.vue`
- [Builtin Views](https://github.com/vitejs/devtools/blob/main/packages/core/src/client/webcomponents/components/views-builtin/ViewBuiltinSettings.vue): view layer · Settings, messages, terminals, command palette, confirmations, and popups · `packages/core/src/client/webcomponents/components/views-builtin/ViewBuiltinSettings.vue`
- [JSON Render](https://github.com/vitejs/devtools/blob/main/packages/core/src/client/webcomponents/json-render/index.ts): renderer · Structured object rendering catalog used by the client views · `packages/core/src/client/webcomponents/json-render/index.ts`
- [UI State](https://github.com/vitejs/devtools/blob/main/packages/core/src/client/webcomponents/state/commands.ts): client state · State managers for commands, docks, messages, terminals, keybindings, toasts, and popups · `packages/core/src/client/webcomponents/state/commands.ts`

### Feature Apps

Vite, Rolldown, and self-inspection products

- [Vite App](https://github.com/vitejs/devtools/blob/main/packages/vite/src/index.ts): vite surface · Vite environment and metadata RPC plus dedicated app shell · `packages/vite/src/index.ts`
- [Rolldown Node](https://github.com/vitejs/devtools/blob/main/packages/rolldown/src/node/index.ts): analysis backend · Build event storage, session management, log cache, and data RPC endpoints · `packages/rolldown/src/node/index.ts`
- [Rolldown App](https://github.com/vitejs/devtools/blob/main/packages/rolldown/src/app/app.vue): analysis ui · Session and compare dashboards with graph, flamegraph, treemap, flowmap, and detail views · `packages/rolldown/src/app/app.vue`
- [Diff Worker](https://github.com/vitejs/devtools/blob/main/packages/rolldown/src/app/worker/diff.worker.ts): compute worker · Background diff computation for compare workflows · `packages/rolldown/src/app/worker/diff.worker.ts`
- [Inspect Node](https://github.com/vitejs/devtools/blob/main/packages/self-inspect/src/node/index.ts): inspection backend · RPC for auth tokens, client scripts, plugins, docks, RPC functions, and shared-state keys · `packages/self-inspect/src/node/index.ts`
- [Inspect App](https://github.com/vitejs/devtools/blob/main/packages/self-inspect/src/app/app.vue): inspection ui · Browser app for inspecting devtools internals and registered surfaces · `packages/self-inspect/src/app/app.vue`

### Delivery

Deployment, docs, examples, and validation

- [Web Extension](https://github.com/vitejs/devtools/blob/main/packages/webext/src/background.ts): deployment shell · Browser-extension background, devtools panel, proxy, and window coordination · `packages/webext/src/background.ts`
- [Examples](https://github.com/vitejs/devtools/blob/main/examples/plugin-file-explorer/src/node/index.ts): integration samples · Plugin examples with node backends and playground UIs for integration reference · `examples/plugin-file-explorer/src/node/index.ts`
- [Docs Site](https://github.com/vitejs/devtools/blob/main/docs/.vitepress/config.ts): documentation · VitePress docs, guides, kit references, and error documentation · `docs/.vitepress/config.ts`
- [E2E Tests](https://github.com/vitejs/devtools/blob/main/e2e/src/harness.ts): validation · End-to-end fixture and integration tests for real host/runtime behavior · `e2e/src/harness.ts`

## Connections

- Kit SDK → Node Runtime: plugin API · Core consumes the shared SDK contracts to expose host integration boundaries
- Kit SDK → Vite App: vite integration · Vite-specific features are built on the same plugin and RPC contract
- Kit SDK → Examples: example plugins · Examples demonstrate how third-party tooling uses the SDK
- Shared State → UI State: shared state · Shared-state primitives inform the client-side state managers
- UI Toolkit → Client Shell: visual system · Core client UI relies on shared presentation primitives
- UI Toolkit → Rolldown App: design system · Rolldown app uses the common UI toolkit for its presentation layer
- UI Toolkit → Inspect App: shared visuals · Inspection app uses the common UI toolkit for consistent rendering
- Node Runtime → Core RPC: serves rpc · Node runtime exposes internal and public RPC endpoints
- Node Runtime → Core Plugins: loads plugins · Runtime startup wires plugin registration and host integration
- Core RPC → Client Shell: state delivery · RPC feeds the client with runtime state and actions
- Core Plugins → Web Extension: embed/extend · Plugin and injection layers support browser-extension deployment
- Client Shell → Dock System: layout · The client shell organizes content through the dock system
- Client Shell → Builtin Views: panels · Builtin views render settings, messages, terminals, and palette flows
- Builtin Views → JSON Render: structured render · Views use the JSON renderer for typed object visualization
- UI State → Dock System: view state · Dock state drives panel placement and persistence
- UI State → Builtin Views: ui actions · Command, confirm, toast, and keybinding state powers built-in views
- Rolldown Node → Core RPC: rpc data · Rolldown backend publishes build analysis through RPC
- Rolldown Node → Diff Worker: diff jobs · Compare summaries offload expensive diffing to a worker
- Rolldown App → Diff Worker: compare ui · Compare dashboards consume worker-produced diff results
- Inspect Node → Core RPC: inspection rpc · Self-inspection backend exposes internal devtools surfaces via RPC
- Inspect App → Inspect Node: inspect data · Inspection app reads auth, plugins, scripts, docks, and shared-state data
- Vite App → Core RPC: host state · Vite-specific metadata is published through the shared RPC channel
- Web Extension → Client Shell: hosts ui · Extension shell wraps the client UI for browser targets
- Examples → E2E Tests: reference flows · Examples mirror integration patterns exercised by end-to-end tests
- Docs Site → Kit SDK: usage docs · Documentation explains the SDK and integration patterns
- Docs Site → Node Runtime: runtime docs · Docs cover the main devtools runtime and deployment modes
- E2E Tests → Node Runtime: integration check · End-to-end tests validate real host/runtime behavior