react-trace-visual

An interactive 3D visualization of the React rendering stack — trace component renders, state updates, Zustand store actions, and async queries in real time.

What it does

• Instruments React components, hooks, and Zustand stores without modifying application code
• Visualises the component tree and render relationships as an interactive 3D graph (React Three Fiber)
• Shows live event timelines: renders, state diffs, query lifecycle, custom user events
• Left panel lets you inspect individual nodes; right panel shows event history and filter controls

Quick start

bun install
bun dev

Open http://localhost:5173.

Tech stack

• TypeScript + React 19
• React Three Fiber + @react-three/drei — 3D scene
• Zustand — state management
• TanStack Query — async data layer
• D3 hierarchy — tree layout
• Leva — debug controls
• Vite — dev server and bundler