The Problem
As React and Next.js apps grow, it becomes hard to answer simple questions:
- Which component uses which hook?
- Where is this API being called?
- What breaks if I change this file?
- Which components are duplicated across pages?
You end up jumping between 10 files just to trace one data flow.
What I Built
ReactGraph is an open source developer tool that analyzes your React/Next.js project and renders it as an interactive hierarchy graph.
Pages → Components → Hooks → APIs
Every node is clickable. Every connection is visible. Props and TypeScript types are shown inline on each node.
Features
- Interactive graph — zoom, pan, click any node to inspect it
- Props & types — see exactly what each component expects
- Impact Analysis — click a node to see everything that breaks if you change it
- Health Check — run a TypeScript check and see errors mapped onto the graph
- Circular Dependency Detection — automatically flags components in circular render loops
- Prop Drilling Detection — finds props passed more than 3 levels deep
- Move to Shared — detects components used in multiple pages that should be in your shared folder
- Unused Component Detection — surfaces dead code you can safely delete
How to Use It
Option 1 — npm package (run from any project):
npm install @reactgraph-ui/core
npx reactgraph serve .
Then open http://127.0.0.1:4174 in your browser.
Option 2 — VS Code extension:
Install from the marketplace, open any React project, and run:
Ctrl+Shift+P → ReactGraph: Open Graph
Works With
- Next.js App Router
- Next.js Pages Router
- Create React App
- Vite + React
- Any TypeScript React project
Links
- 📦 npm: https://www.npmjs.com/package/@reactgraph-ui/core
- 🔗 VS Code: https://marketplace.visualstudio.com/items?itemName=reactgraph.reactgraph-vscode
- ⭐ GitHub: https://github.com/robinnayak/reactgraph
Feedback and contributions are very welcome. What features would make this useful for your workflow?
Top comments (0)