One click saves
a thousand tokens.

Stop describing UI elements to your AI agent. Click. Copy the exact XPath, CSS selector, and React component. Paste.

Built for pair-coding with Claude Code Cursor Codex Copilot

Get the AI agent prompt

Paste it into Claude Code, Cursor, or Codex — it installs & wires react-path-picker for you.

↗ Try it live on this page — click the aim icon in the top-right to inspect any element.

$ npm install react-path-picker

GitHub

npm v0.1.9 · MIT License · Dev-only by design · Zero production footprint

The difference, in one screen

✕ Without — what you usually type

"the buy button on the checkout page — the green one, second from the right, inside the sticky bottom bar… not the one in the header…"

~80 tokens still ambiguous

✓ With — one click, paste this

[xPathInfo] Origin: http://localhost:3000, Project: ~/dev/acme/webapp, Route: /checkout, XPath: /html/body/div[2]/footer/button[2], CSS: button.btn-primary, React: BuyButton (components/BuyButton.tsx)

1 paste unambiguous · paste-ready

Plain HTML / non-React pages get Route, XPath, CSS via the framework-agnostic core.

How it works

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

Click the aim icon

A small target icon sits fixed in the top-right of your dev build. Click it to arm the inspector — or tap Shift twice, the one gesture no browser has claimed.

Hover any element

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

<button> · BuyButton

Click to copy

Origin, project root, route, XPath, CSS selector, and React component name & source path land on your clipboard in one line. Need several? Shift+click each one and press Enter.

✓ Copied to clipboard

Then paste it into…

Your AI coding agent

"Make this button 8px taller" — and the agent already knows which button.

A Playwright / Selenium test

XPath and CSS selector are both valid drop-ins — no DevTools spelunking.

A bug ticket / Slack thread

Route + component + file path = the engineer knows where to start in 3 seconds.

Component & source path require React. Plain HTML pages get Route, XPath, CSS via the core API.

Features

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

Selectors agents can use

ID shortcuts and SVG-boundary detection make XPaths short and stable. Drop them straight into Selenium, Playwright, or your agent's prompt.

No `css-a8f3d2` noise

Auto-filters Ant Design / emotion hash classes and caps depth at 5. Selectors a human can actually read — and your agent can match.

Tells you the file, not just the tag

Walks the React Fiber tree for the nearest user component and its source path — BuyButton (components/BuyButton.tsx).

A shortcut nothing else wants

Tap Shift twice. Every Ctrl/Alt/Shift + letter combo already belongs to some browser; a modifier double-tap belongs to none.

Three elements, one paste

Shift+click to stack picks, then Enter. They land under one shared header, so the origin and route are written once instead of three times.

Works on plain HTML too

Subpath react-path-picker/core runs without React. One esm.sh line and any static page has an inspector.

vs the alternatives you already have

	Browser Inspect	React DevTools	react- path-picker
XPath + CSS selector in one click	partial	—	✓
React component name and source file	—	partial	✓
Single-line clipboard format for AI prompts	—	—	✓
Several elements in one paste	—	—	✓
Filters CSS-in-JS hash classes	—	—	✓
Works on plain HTML / non-React pages	✓	—	✓ (core)

Quick Start

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

Production-safe by design. A single process.env.NODE_ENV guard keeps the picker out of your production bundle. End users never see it; tree-shaking removes the runtime entirely.

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'; };
  const fmt = (r) =>
    `[xPathInfo], Origin: ${r.origin}, Route: ${r.route}, XPath: ${r.xpath}, CSS: ${r.cssSelector}`;
  btn.onclick = () => {
    if (ins) { ins.deactivate(); reset(); return; }
    ins = new PathPickerInspector({
      getRoute: () => location.pathname,
      onPick: (r) => { navigator.clipboard?.writeText(fmt(r)); reset(); },
      // Shift+click stacking needs this. Without it the picker stays one-pick-at-a-time.
      onPickMany: (rs) => { navigator.clipboard?.writeText(rs.map(fmt).join('\n')); 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} />;
}

Working across several repos? Add project so every pick says which codebase it came from.

<PathPickerButton pathname={pathname} project="acme-web" />

Omit it and the repo root is derived from React's dev source info — Project: /Users/me/dev/acme/webapp.

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,
  getProject: () => 'acme-web', // optional — omit to auto-derive from React dev source info
  onPick: (result) => {
    console.log('[xPathInfo]', result);
    // result: { origin, project, route, xpath, cssSelector, tagName, id,
    //          textContent, reactComponent, reactSource }
  },
  // Shift+click stacking stays off until you supply this. Enter confirms the stack.
  onPickMany: (results) => console.log('[xPathInfo]', results),
  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?, project?, color?, onPick?, onPickMany?, hotkey?, multi? }	React button + overlay. Drop into your dev layout.
usePathPicker	(options?) => { 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.