react-grep - React Component Inspector
Hold ⌘ to see React component names + file:line overlaid on any element.
Zero dependencies. Works with any React app in development mode.
npm install -D react-grepyarn add -D react-greppnpm add -D react-grepbun add -D react-grepInspect
See component names and source file locations overlaid on any element.
Toggle Source
Switch between the component definition and the call site.
Copy Path
Copy file:line to your clipboard instantly.
Why react-grep
No runtime dependencies. Just import and go.
Lightweight enough for any dev setup.
Vite, Next.js, Gatsby, React Router, and more.
How It Works
react-grep reads React's internal fiber tree to find component names and source locations. When you hold the modifier key and hover, it highlights the element and shows a tooltip with the component name, file path, and line number. Source maps are resolved automatically so you see original file paths, not bundled output.
This only works in development builds of React, which include _debugSource and fiber metadata. Production builds strip this data, so react-grep is safe to leave in your dev dependencies.
Compatibility
react-grep works with any React app that uses react-dom in development mode. No framework-specific plugin is needed.
| Framework / Bundler | Status |
|---|---|
| Vite + React | Tested |
| Next.js 16 (Turbopack) | Tested |
| Next.js 16 (Webpack) | Tested |
| React Router v7 | Tested |
| Gatsby | Tested |
| esbuild | Tested |
Next.js has dedicated support for server component names and Turbopack indexed source maps.
Usage
ESM Import
import "react-grep";The inspector activates automatically on import.
Script Tag
<script src="https://unpkg.com/react-grep/dist/index.global.js"></script>Manual Control
import { init, destroy } from "react-grep";
init(); // start the inspector
destroy(); // stop and clean upFrequently Asked Questions
What is react-grep?
react-grep is a zero-dependency React developer tool that overlays component names and source file locations on any element when you hold Cmd (Mac) or Ctrl (Windows/Linux). It reads React's internal fiber tree directly, so it works with any React app in development mode without any configuration or framework-specific plugins.
How do I install react-grep?
Install via your package manager: "npm install -D react-grep", "pnpm add -D react-grep", "yarn add -D react-grep", or "bun add -D react-grep". Then add 'import "react-grep"' to your app entry point. The inspector activates automatically on import.
Does react-grep work with Next.js?
Yes. react-grep is tested with Next.js 16 using both Turbopack and Webpack. It includes dedicated support for server component names and Turbopack indexed source maps. It also works with Vite, React Router v7, Gatsby, and esbuild.
How is react-grep different from React DevTools?
React DevTools requires opening browser devtools and navigating a component tree panel. react-grep shows component names and file locations directly on the page as you hover, without leaving the viewport. It also copies file:line paths to your clipboard for instant editor navigation.
Does react-grep have any dependencies?
No. react-grep has zero runtime dependencies. The entire library is ~5KB gzipped. It reads React's fiber tree directly and resolves source maps on its own, with no external dependencies required.