React 19 Dev Inspector Monorepo

A modern, low-level React 19 inspector for Vite/Rolldown dev servers.

This repo contains:

• packages/vite-react-inspector — source for the vite-react-inspector npm package
• examples/basic-react19 — a Vite + React 19 example app

The package is intentionally dev-only. It injects a tiny browser runtime into Vite dev pages, lets you toggle an inspector with a shortcut, highlights React-owned DOM nodes, resolves the selected component/source location through React 19 dev fiber stacks and Vite source maps, and opens your editor from a local dev-server endpoint.

Supports Vite 8 and React 19 out of the box (see peer dependency ranges on npm for exact semver).

Shortcut

• macOS: Ctrl + Shift + Command + C
• Windows/Linux: Ctrl + Shift + Alt + C

Why this implementation is modern

Older React inspectors typically relied on Babel JSX source injection or React's old _debugSource metadata. React 19 removed _debugSource, so this package favors React 19 development stacks, source maps, and a Vite-native runtime injection path.

Optional exact DOM annotation is included behind strictDomSource: true. It uses a small no-Babel JSX scanner and MagicString so host JSX elements can be mapped directly to the TSX location during development.

Quick start in the example

npm install
npm run build
npm run dev:example

Open the example app, press the shortcut, hover an element, and click a component/source candidate to open it in your editor.

Install

Install from npm as a dev dependency:

npm install -D vite-react-inspector

Source repository: github.com/ddcech/vite-react-inspector.

Package usage

// vite.config.ts
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
import { reactDevInspector } from 'vite-react-inspector/vite'

export default defineConfig({
  plugins: [
    react(),
    reactDevInspector({
      editor: 'cursor',
      strictDomSource: false,
    }),
  ],
})

Status

This is a complete first implementation, not a polished production release. The runtime intentionally isolates all React private-fiber access in one module so the adapter can be updated if React internals change.