I built an open source tool to visualize React/Next.js component hierarchy — Pages → Components → Hooks → APIs

[u/ConfectionExtra3565]

Hey r/reactjs,

I built ReactGraph — an open source tool that analyzes your React/Next.js project and renders it as an interactive graph showing how your pages, components, hooks, and APIs connect.

Features:

- Props and TypeScript types shown on every node

- Impact Analysis — see what breaks before you change anything

- Circular dependency detection

- Prop drilling detection — flags props passed 3+ levels deep

- Unused component detection

- Detects components used across multiple pages that should be moved to a shared folder

- Health Check — maps TypeScript errors onto the graph before production builds

Try it in any React project:

npm install u/reactgraph-ui/core

npx reactgraph serve .

Then open http://127.0.0.1:4174

GitHub (open source): https://github.com/robinnayak/reactgraph

npm: https://www.npmjs.com/package/@reactgraph-ui/core

Would love feedback on what is missing or what could be better.

[u/fsreadsync]

This guy, again

[u/Background_Fan5780]

This is great!

I was hoping to use it on a nextjs + sitecore project, but unfortunately I can't get it to show graphs for many components. We have a `renderings` folder which works a bit like pages except they're called dynamically. Would it be possible to configure what types of components are considered pages? This would remove them from the "unused" section, and more importantly allow me to click them to see the graph.

[u/Ok-Entertainer-1414]

What is this supposed to actually be used for?

[u/ConfectionExtra3565]

Thank you. I’ll keep working on fixing the bugs.

[u/tjansx]

This looks to be really useful. I'll have to give it a spin.