inspect-react
v0.1.1
Published
Drop-in Figma-Dev-Mode-style inspect panel for React prototypes. Click any element to see its component, props, source location, layout, and styles.
Maintainers
jameslavineReadme
inspect-react
Drop-in Figma-Dev-Mode-style inspect panel for React prototypes.
Click any element in your deployed prototype to see its component identity, props, source location, layout box, Tailwind classes, and computed styles — automatically, with zero manual documentation.
Install
npx inspect-react@latest initThe CLI detects your Next.js App Router project and inserts a <Script> tag in your root layout. It loads on your deployed prototype as well as in local dev — that's the point, since inspect-react is a handoff tool for deployed prototypes. Note that the panel exposes source paths, component names, and prop values to anyone who loads the page, so keep it to internal/shared prototypes rather than public production builds.
How selection works
Inspect React uses Figma's "enter container" model:
- First click on an element inside a React component selects the enclosing component (e.g. clicking the avatar inside
<UserCard>selectsUserCard). - Subsequent clicks within the selected component drill down into DOM children.
- Clicking outside the current component re-enters whichever component the new target lives in.
- Esc clears selection completely.
What's in the panel
- Component identity — name, ancestry breadcrumb, props (with values)
- Source location — file path + line number, click to copy
- Layout box — Figma-style margin/border/padding/content diagram
- Tailwind classes — applied classes with custom token names resolved
- Computed styles — typography, colors, radii, shadows (curated, not everything)
Status
v0 — Next.js App Router + Tailwind v4 only. Pages Router, Vite, and a plugin system come later.
Development
Working on inspect-react itself:
git clone https://github.com/lavinejames/inspect-react
cd inspect-react
npm install
npm run dev # rebuilds dist/ on change (runtime + CLI)To test changes against a real prototype, serve the local bundle and point a prototype at it.
First, serve dist/ in another terminal in this repo:
npx serve dist -p 5180Then wire the prototype to that local bundle. Don't use npx inspect-react@latest for this — the package may not be published, and even when it is, npx would fetch the published version instead of your local build. Instead, either run the locally-built CLI directly from your prototype repo:
# in your prototype repo (adjust the path to this repo)
node ../inspect-react/dist/cli.js init --src http://localhost:5180/runtime.iife.js…or skip the CLI entirely and add the dev-only <Script> tag yourself, just inside <body> in your root layout:
{/* inspect-react (dev only) */}
{process.env.NODE_ENV === "development" && (
<Script src="http://localhost:5180/runtime.iife.js" strategy="afterInteractive" />
)}The --src flag (and the src above) overrides the default CDN URL so the prototype loads your local build. The port must match the serve port above (5180) — not Vite's 5173. Reload the prototype to pick up new builds.
Other scripts:
npm run typecheck— TS check without emitnpm run build— production build (CSS + ESM + IIFE + types)npm run dev:css— watch Tailwind input only
License
MIT