Skip to content

React Scout

A bookmarklet that helps AI agents find React components in your codebase. Click any element to copy its component name, source file, props, and ancestry — ready to paste into an AI chat.

Drag this to your bookmarks bar, or click to copy.

How It Works

  1. 1

    Install

    Drag the button above to your bookmarks bar. One-time setup.

  2. 2

    Activate

    Open your Next.js dev app and click the bookmarklet. A crosshair overlay appears.

  3. 3

    Inspect

    Hover over any element to see its component name. Click to copy full details to clipboard. Press Escape to dismiss.

Output Example

When you click an element, this Markdown block is copied to your clipboard:

## React Scout

### Component
`HeaderNav`

### Source
`src/components/layout/HeaderNav.tsx:28`

### Props
- `user`: `{ name: "John", role: "admin" }`
- `showSearch`: `true`

### Component Chain
`RootLayout > AppShell > Header > HeaderNav`

### Element
- **Tag:** `<nav>`
- **Classes:** `flex items-center gap-4 px-6 h-14 border-b`
- **Text:** `Home Dashboard Settings`

What Gets Extracted

Component nameThe nearest React component name (function, class, ForwardRef, Memo)
Source file + lineOriginal file path via Next.js symbolication, or bundled path for other React apps
PropsAll props passed to the component (excluding children), with values serialized
Parent chainComponent ancestry via fiber.return — shows the render tree hierarchy
Owner chainComponent ancestry via _debugOwner — shows which component created this one
Server componentsRSC components in the ancestry, tagged with [Server] environment
CSS / Tailwind classesAll class names on the selected DOM element
Text contentText content and aria-label of the selected element

Under the Hood

React Scout reads React's internal fiber tree directly from the DOM. In development mode, every DOM element rendered by React has a __reactFiber$ property that links to the component's fiber node.

From the fiber, React Scout extracts the component name, props, and parent hierarchy. For source file locations, it parses the _debugStack Error object that React 19 attaches to each fiber in dev mode.

For Next.js projects, raw bundled paths are resolved to original source file paths using the dev server's built-in /__nextjs_original-stack-frames symbolication endpoint.

Limitations & Compatibility

  • Dev mode only — Production builds strip fiber debug info and minify component names.
  • React 18+ — Fully supports React 19. Uses _debugStack (not the removed _debugSource).
  • Next.js 13+ — App Router and Pages Router. Source file paths are resolved to original files. Other React apps show bundled paths.
  • Chrome works best — Richest stack traces. Firefox and Safari supported with slightly less detail.
  • CSP — If your dev server has custom Content Security Policy headers, the bookmarklet may be blocked. Add 'unsafe-inline' to script-src or temporarily disable CSP middleware during development.