I built an open-source tool to visualize React/Next.js component hierarchy

Robin Nayak — Fri, 24 Apr 2026 00:30:53 +0000

The Problem

As React and Next.js apps grow, it becomes hard to answer simple questions:

You end up jumping between 10 files just to trace one data flow.

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.

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

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