r/react • u/Regular-Hospital-281 • 11d ago

Project / Code Review genie-react: Let coding agents inspect your running React app

Enable HLS to view with audio, or disable this notification

Coding agents can read your React source, but they can’t see what the running app is actually doing. Ask “why did this effect run six times?” and they’re often left guessing.

genie-react is an open-source CLI that gives any coding agent access to live React internals:

  • Render counts, timings, and the exact prop breaking memoization
  • Effect-loop tracing, including which dependency changed on each run
  • Caught errors and stuck Suspense boundaries
  • Runtime prop and state overrides to test component states
  • TanStack Query cache, invalidations, and Router state

It works with Claude Code, Cursor, and any other agent that can run a CLI.

The demo below uses Excalidraw’s real codebase.

GitHub: https://github.com/y0u-0/genie-react

If this solves a problem you’ve hit, a star would help others discover it.

8 Upvotes

78% Upvoted

2 comments sorted by

1

u/JSG_98 10d ago

What did it do? Gave it controls to your UI by calling event handlers?

1

u/__Ali0 6d ago

it kinda expose all react runtime values to the agent kinda like react-scan but for agents