Vite Dev Tools

Lightweight devtools overlay for Vite. Inspect your component tree, capture console errors, and jump to source — all without leaving the browser. Built-in MCP server lets AI agents query and control your running app.

github.com/Danendz/vite-dev-tools npm/@danendz/vite-dev-tools

// tech stack

TypeScriptVitePreactMCP

// features

  • No browser extension needed — works inline within the app
  • Click-to-edit with persistent source file writes
  • React 18+ and Vue 3.3+ support in one plugin
  • Built-in MCP server with 16 tools for AI agents
  • Dockable, resizable panel with component tree, props editor, and console tabs

// architecture

Vite plugin injects a Preact-based overlay rendered inside a Shadow DOM for style isolation. Component tree inspection uses framework-specific adapters for React and Vue. An integrated MCP server (stdio transport) exposes 16 tools for AI agents to query the component tree, read props/state, highlight elements, and interact with the running app.

← Back to CV