next-inspect-ui
v0.3.0Inspect any React or Next.js Component in your browser and jump directly to its source in your IDE. Works with compound components too. Hold to inspect the owning component’s usage.
Installation
npm i -D next-inspect-uiUsage
Tell your agent
Install next-inspect-ui as a dev dependency. In the async Next.js root layout, dynamically import InspectUI inside a NODE_ENV development check. Mount it once alongside children inside body, preserving existing fonts, providers, and styles.
OR
Do it manually. Add this to app/layout.tsx. Keep your existing fonts, providers, and body styles.
export default async function RootLayout({
children,
}: {
children: React.ReactNode
}) {
const InspectUI = process.env.NODE_ENV === "development"
? (await import("next-inspect-ui")).InspectUI
: null
return (
<html lang="en">
<body>
{children}
{InspectUI && (
<InspectUI />
)}
</body>
</html>
)
}FAQ
Press Option / Alt + X to enable inspect mode, then hover an element. The inspector reads React Fiber metadata and source maps to find its source. Click or press Enter to open it. Hold Option / Alt to inspect the owning component’s usage.
Use the development-only dynamic import shown in Usage. Your bundler tree-shakes the whole library, leaving 0 B of inspector code in production. A static import disables the inspector but may retain a small wrapper. Serve the standalone script only in development.
No additional runtime libraries are required. Source resolution, stack parsing, and source-map decoding are built in. React and ReactDOM are peer dependencies.
No. There is no Webpack, Vite, Turbopack, Babel, or SWC plugin. You mount InspectUI in development. It reads the React fiber tree at runtime. No props are required. projectRoot can optionally resolve relative paths explicitly.
No. It supports React 19+ apps, including Next.js and Vite. React 18 compatibility is experimental. Source accuracy depends on your framework’s development metadata and source maps; Next.js Server Component locations use available server debug metadata.
Press Space to open the popover. Component nests from the page boundary down to the hovered element. Element shows nearby HTML, stopping at body. Left opens Component and Right opens Element; Up / Down moves between rows and previews their elements. Enter opens the selected source. Press Space to close the popover or Escape to exit inspect mode.
Cursor, VS Code, VS Code Insiders, Windsurf, and Zed. Choose your editor in the inspector settings. The inspector opens source through an editor URL or your framework’s development endpoint.
Any React element in the rendered tree: HTML, SVG, shadcn, compound components, and the rest of the usual patterns. See the patterns