Inspect, Analyze, Extend
Vite DevTools not only provides built-in features, but also a extensible architecture for custom integrations.
🔍
Build Analysis
Deep insights into your Vite-Rolldown build process. Visualize module graphs, dependencies, and build metadata to understand what's happening under the hood.
🧩
Extensible Architecture
Build custom DevTools integrations with the DevTools Kit. Extend any Vite plugin with a simple devtools hook to add your own visualizations and tools.
🚀
Unified Dock System
A familiar dock interface (like macOS Dock) where all DevTools integrations appear together. Switch between tools seamlessly in a consistent UI.
🔌
Type-Safe RPC
Built-in RPC layer for bidirectional communication between server and client. Full TypeScript support for type-safe data exchange.
🎨
Flexible UI Options
Choose from iframe panels, custom renderers, or action buttons. Host your UI as embedded panels, browser extensions, or standalone webpages.
⚡
Framework Agnostic
Works with any framework built on Vite. Use Vue, React, Svelte, or any other framework to build your DevTools UI.