React Trace Studio

Inspect any rendered component, jump to its source, edit in browser and export context to AI agents.

React Trace Studio — inspect any rendered component, jump to its source, edit in browser and export context to AI agents

How to use React Trace Studio

  1. Turn the inspector ON and click any element of the demo app to select its component
  2. Read the breadcrumb, source path with line and column, and the component props
  3. Edit the source in the preview pane and save it locally per file
  4. Copy the path and line reference in the exact plugin format for your AI agent
  5. Pick VS Code, Cursor, Windsurf, Zed, WebStorm or IntelliJ and copy its editor URL
  6. Add review comments and copy them all, or send them to an OpenCode session
  7. Copy the install snippet and the full context JSON for AI agents

Features

  • React inspector studio built on the real buzinas/react-trace repo (MIT, kit v0.0.8)
  • All 4 official plugins with their real behaviour: preview, copy, open-editor, comments
  • The exact editor URL builder for all 6 presets, VS Code family and JetBrains formats
  • The verbatim copy format: project-relative path plus line number
  • All 7 public core hooks and the 4 widget positions from the repo
  • A demo app modelled on the repo example app, with breadcrumb, props and source
  • Install snippet for @react-trace/kit with react 18 peers and VITE_ROOT dev script
  • Honest scope: the live fiber walk and source maps need a dev server, so the studio runs the exact inspector logic on a demo app

Frequently asked questions

Is it free?

Yes, unlimited.

Login to use this free online tool. Create a free account to get started.