How it works

A development tool for React apps. Enable inspect mode, then click an element to jump straight to its source in your editor.

Inspiration

Inspired by click-to-component, react-dev-inspector, and React Grab.

Next Inspect UI adds Component and Element tabs for browsing component parents and nearby HTML. Use the keyboard to navigate shadcn/ui and compound components, then open an implementation or its usage in your page.

[ BROWSER EDITOR ]
#Stage
  1. 01Browser clickPick an element on the page
  2. 02DOM elementFind the exact visible element
  3. 03React FiberFollow its React reference
  4. 04Fiber debug metadataRead source clues with the built-in stack reader
  5. 05Source maps (when needed)Resolve original files with the built-in decoder
  6. 06file.tsx:42:8Resolve the file, line, and column
  7. 07Editor link / dev serverSend the source location
  8. 08Cursor / VS CodeOpen the code in your editor
One click. Exact source.08 steps

No custom build plugin

Next Inspect UI uses React’s internal component tree to find the code behind an element. Source maps connect the bundled JavaScript to your original files, without a custom build plugin. In Next.js, the inspector also uses the built-in development endpoints to resolve source locations and open your editor.

Stack parsing and source-map decoding are built in. React and ReactDOM are peer dependencies; no additional source-resolution library is required.

IDE support through URL handling

Open source files in VS Code, VS Code Insiders, or Cursor. The inspector creates an editor URL with the file path, line, and column. Your operating system opens that location in the installed editor.

Choose your editor in the inspector settings. See VS Code’s URL handling documentation for the URL format.

For example, cursor://file/path/to/component.tsx:42:8opens the file in Cursor at line 42, column 8.

Shortcuts

Press Option / Alt + X to enable inspect mode. Press Space to open the tree, use the arrow keys to navigate, and press Enter to open the selected source.

See all keyboard shortcuts.

Keep the inspector out of production

A development-only import guard lets your bundler tree-shake the whole library, leaving 0 B of inspector code in production. A static import turns off the inspector but may retain a small wrapper.

BuildSize (gzip)
Development component23.1 kB
Development script81.2 kB
Production guarded import0 B (library excluded)

Follow the development-only setup in Usage. For the standalone script, keep both its route and script tag development-only.