react-dev-inspector-overlay

A zero-config React dev tool that shows data-testid, component trees, and source file locations for any element you hover over — with a floating toolbar, pinnable tooltip, and one-click "open in editor".

Dev only — add it conditionally so it never ships to production.

Features

• Tooltip follows cursor, always stays inside viewport
• Draggable tooltip when pinned; draggable floating toolbar
• Shows data-testid chain from the hovered element up to the root
• Shows your component tree (own components vs. library) with source file + line
• Click any source path to copy it; click ↗ to open in your editor
• Collapsible sections; React root #id shown in component tree
• Works on every element — with or without data-testid
• initDevOverlay() export for plain HTML <script> usage (no bundler required)

Installation

npm install -D react-dev-inspector-overlay

Peer dependencies: react >= 18, react-dom >= 18

Usage

React component

Add <DevTestIdOverlay /> alongside your app root. Wrap it in a dev-only guard so it's excluded from production bundles:

import DevTestIdOverlay from 'react-dev-inspector-overlay'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
    {import.meta.env.DEV && <DevTestIdOverlay />}
  </StrictMode>,
)

Controls

| Action | Result | |---|---| | Hover | Tooltip follows cursor | | Click | Pin tooltip + log to console | | Alt+Click | Pin + log + debugger pause | | P | Freeze hover in place | | Esc | Close tooltip |

Building from source

npm install
npm run build   # outputs ESM + UMD to dist/