react-path-picker — DOM Inspector for React & Next.js

How it works

Three clicks. From mystery DOM node to a clipboard-ready [xPathInfo] snippet your AI agent can paste straight into a fix.

1

Click the aim icon

A small target icon sits fixed in the top-right of your dev build. Click it to arm the inspector.

2

Hover any element

An overlay highlights the element under your cursor with a tooltip showing the tag, classes, and detected component.

<button> · BuyButton

3

Click to copy

Route, XPath, CSS selector, and React component name & source path land on your clipboard in one line.

✓ Copied to clipboard

Plain DOM (core API only)

[xPathInfo] Route, XPath, CSS

React / Next.js app

[xPathInfo] Route, XPath, CSS + React component & source path

React component detection walks the Fiber tree at runtime. Source paths require a small dev-only loader (optional).

Features

Everything you need to inspect DOM elements during development — nothing you don't.

Smart XPath

ID shortcuts and SVG-boundary detection produce minimal, readable expressions.

CSS Selector

Unique selectors capped at 5 levels. Auto-filters Ant Design / emotion hash classes like css-*.

React Component

Walks the React Fiber tree to find the nearest user component name and (optionally) its source file.

Framework-agnostic core

Subpath import react-path-picker/core exposes getXPath(), getCssSelector(), and the inspector class — no React required.

Quick Start

Pick one. The Prompt tab is the default — your AI agent does the wiring for you.

Prompt for Claude Code / Cursor / Codex

Install and wire up react-path-picker into this project.
Repo: https://github.com/kiboko-ai/react-path-picker

Steps:
1. Detect the project type:
   - React app — Next.js App Router, Pages Router, or React with React Router / Vite. Follow steps 2–6.
   - Plain HTML — static `.html` files, no bundler / no npm. Skip steps 2–5 and use the Plain HTML snippet at the bottom instead.
2. Install the package: `npm install react-path-picker`.
3. Create a dev-only `DevPathPicker` component that uses `PathPickerButton` from `react-path-picker`.
   Pass the current pathname via the framework's router hook
   (`usePathname` for Next.js App Router, `useRouter().pathname` for Pages Router,
   or `useLocation().pathname` for React Router).
4. Gate it on development (`process.env.NODE_ENV !== 'production'` or `!import.meta.env.PROD`)
   so it never renders in production.
5. Mount it once at the root (`app/layout.tsx`, `pages/_app.tsx`, or `App.tsx`) so the
   inspector button shows on every page.
6. Run the project's typecheck/build (e.g. `npm run typecheck`) and fix any issues.

For Plain HTML, add this <script type="module"> to a dev-only HTML page (never ship to
production). It loads react-path-picker/core from esm.sh, mounts a fixed top-right button,
and copies [xPathInfo] Route, XPath, CSS to the clipboard on pick:

<script type="module">
  import { PathPickerInspector } from 'https://esm.sh/react-path-picker/core';
  const btn = document.createElement('button');
  btn.textContent = '◎';
  btn.setAttribute('data-pathpicker-ignore', '');
  btn.style.cssText =
    'position:fixed;top:6px;right:6px;z-index:99998;width:28px;height:28px;' +
    'border-radius:6px;border:1px solid rgba(255,255,255,0.22);background:#0f172a;' +
    'color:#fff;cursor:pointer;font:14px/1 monospace';
  document.body.appendChild(btn);
  let ins = null;
  const reset = () => { ins = null; btn.style.background = '#0f172a'; };
  btn.onclick = () => {
    if (ins) { ins.deactivate(); reset(); return; }
    ins = new PathPickerInspector({
      getRoute: () => location.pathname,
      onPick: (r) => {
        navigator.clipboard?.writeText(
          `[xPathInfo] Route: ${r.route}, XPath: ${r.xpath}, CSS: ${r.cssSelector}`
        );
        reset();
      },
      onCancel: reset,
    });
    ins.activate();
    btn.style.background = '#329D9C';
  };
</script>

Do not modify production code paths or render the picker in production builds.

Works with any AI coding agent that has shell & filesystem access.

Prefer to wire it up by hand? Pick the router you're using.

components/DevPathPicker.tsx

'use client';

import { usePathname } from 'next/navigation';
import { PathPickerButton } from 'react-path-picker';

export default function DevPathPicker() {
  const pathname = usePathname();
  if (process.env.NODE_ENV !== 'development') return null;
  return <PathPickerButton pathname={pathname} />;
}

app/layout.tsx

import DevPathPicker from '@/components/DevPathPicker';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <DevPathPicker />
        {children}
      </body>
    </html>
  );
}

pages/_app.tsx

import { useRouter } from 'next/router';
import { PathPickerButton } from 'react-path-picker';

export default function App({ Component, pageProps }) {
  const router = useRouter();
  return (
    <>
      {process.env.NODE_ENV === 'development' && (
        <PathPickerButton pathname={router.pathname} />
      )}
      <Component {...pageProps} />
    </>
  );
}

App.tsx

import { useLocation } from 'react-router-dom';
import { PathPickerButton } from 'react-path-picker';

export function DevPathPicker() {
  const location = useLocation();
  if (import.meta.env.PROD) return null;
  return <PathPickerButton pathname={location.pathname} />;
}

Core API

Need to use the inspector outside React, or wire up your own UI? Import from the framework-agnostic react-path-picker/core subpath.

vanilla.ts

import {
  PathPickerInspector,
  getXPath,
  getCssSelector,
} from 'react-path-picker/core';

const inspector = new PathPickerInspector({
  getRoute: () => window.location.pathname,
  onPick: (result) => {
    console.log('[xPathInfo]', result);
    // result: { route, xpath, cssSelector, tagName, id, textContent,
    //          reactComponent, reactSource }
  },
  onCancel: () => console.log('cancelled'),
});

inspector.activate();

// Or use the utility functions directly on any element:
const el = document.querySelector('main')!;
console.log(getXPath(el));        // /html/body/div[2]/main
console.log(getCssSelector(el));  // main.layout-content

Export	Signature	Description
PathPickerButton	{ pathname?, color? }	React button + overlay. Drop into your dev layout.
usePathPicker	(pathname?) => { isActive, justCopied, toggle }	Hook for building your own UI.
PathPickerInspector	new (callbacks) => Inspector	Core class with `activate()` / `deactivate()`.
getXPath	(el: Element) => string	XPath with ID shortcuts & SVG boundaries.
getCssSelector	(el: Element) => string	Unique CSS selector (max 5 levels).
getReactComponent	(el: Element) => { name, source } \| null	Walks the Fiber tree to find the nearest user component.

One click saves a thousand tokens.