Hey r/reactjs,

I've been working on React Trace, a devtool to run together with your app during development and lets you visually inspect any rendered component.

What it does:

• Hover any element to see the component that rendered it and then choose what to do:
• Copy the file:line reference to clipboard.
• Open the file in your favorite editor (VS Code, Cursor, Windsurf, WebStorm, or IntelliJ)
• Preview the source code with Monaco and edit it directly in the browser.
• Add multiple inline comments to specific components, then copy them all to send to your AI agent (or send them directly to OpenCode with its native integration)

Setup is minimal:

Install:

pnpm add -D @react-trace/kit 

Then update your package.json to expose the project root to the tool:

"dev": "VITE_ROOT=$(cwd) pnpm dev" 

Then render the component side-by-side with your app:

<Trace root={import.meta.env.VITE_ROOT} /> 

It ships with conditional exports that resolve to no-ops in production, so there's zero runtime cost in production builds.

Plugin system:

If you want to extend it, you can build plugins that hook into the toolbar, action panel, or settings. There's a scaffolding CLI (pnpm create react-trace-plugin) and full docs.

Site: https://react-trace.js.org

GitHub: https://github.com/buzinas/react-trace

Happy to answer any questions. Feedback welcome!