A development-time React inspector for your components
pnpm add -D @react-trace/kitIdentify rendered components, find their source locations, and choose what to do
- Open the file in your editor, on the exact line of your component definition
- Preview the code and edit it directly in the browser
- Add comments and then copy & paste to your AI agents
- Or even send them to your session on OpenCode for a seamless review experience
Inspect Components
Hover over any element to identify the React component that rendered it, its props, and the full component tree breadcrumb.
Resolve Source Locations
Instantly jump from any rendered element to its exact source file and line number using source maps.
Plugin System
Extend the inspector with plugins for source preview and editing, inline comments, clipboard actions, and editor integration.
Zero Production Cost
Every package ships a production stub. Conditional exports resolve to no-ops in production builds — zero runtime overhead.
Official Plugins
Everything you need, included in @react-trace/kit by default.
Preview
Monaco-based source preview with syntax highlighting, inline editing, and project folder access.
@react-trace/plugin-previewComments
Collect inline review comments anchored to components, then copy or send them to OpenCode.
@react-trace/plugin-commentsCopy to Clipboard
Copy the selected source location as a project-relative path:lineNumber reference.
@react-trace/plugin-copy-to-clipboardOpen Editor
Open the selected source in VS Code, Cursor, Windsurf, WebStorm, or IntelliJ.
@react-trace/plugin-open-editorGet started in 3 steps
Up and running in under a minute.