HN Showcase
Back to browse
React Trace – Development-time visual inspector for React components

React Trace – Development-time visual inspector for React components

by buzinas·Mar 9, 2026·1 point·0 comments
Visit ProjectView on HN

AI Analysis

●●SolidSlickSolve My Problem

Zero production cost via conditional exports swapping to no-ops in production builds.

Strengths
  • •Source map resolution finds exact component definition file and line number.
  • •Plugin system supports custom actions beyond built-in preview and clipboard.
  • •Monaco editor preview allows inline code editing directly in browser.
Weaknesses
  • •React DevTools already covers basic component inspection and props viewing.
  • •AI agent comment integration feels tacked on rather than core workflow.
Target Audience

React developers

Similar To

React DevTools · Why Did You Render · React Inspector

Post Description

React Trace is an open-source (MIT) devtool for React apps. You add one component during development, then hover any element to see which component rendered it, inspect props, and take actions on the source code.

Actions include: copying the file:line path, opening the file in your local editor (VS Code, Cursor, Windsurf, WebStorm, IntelliJ), previewing / editing the source in a Monaco editor directly in the browser, and adding review comments that can be sent to an AI agent (copy & paste or native integration with OpenCode).

It runs entirely client-side using source maps to resolve file locations. The plugin system is designed so you can build custom actions. In production, conditional exports swap everything for no-ops at zero cost.

Site: https://react-trace.js.org Source: https://github.com/buzinas/react-trace

Similar Projects