Why I Built This
Lately, I’ve been noticing a shift.
AI and agents are making development faster than ever. They can write large chunks of code, sometimes entire features. But there’s a tradeoff that doesn’t get talked about enough:
You slowly lose a deep understanding of your own codebase.
And honestly, that’s something I hate.
I don’t use agents inside my IDE. I do use LLMs—but only for small pieces of logic or quick help. I still want to understand what I’m building.
That got me thinking:
If codebases are getting more complex—and we’re relying more on automation—how do we actually see and understand the system?
So I started looking for a graph-based visualization tool that could map out a React/Next.js codebase in a meaningful way.
I didn’t find what I wanted.
So I built it.
What It Does
This tool maps your entire React/Next.js codebase into a 3D graph, showing:
- How components connect
- How data flows
- What depends on what
- And most importantly—what breaks if you change something
All of this is built using AST analysis (no AI for mapping).
Key Features
🔗 AST-Based Graph (No AI Mapping)
- Nodes and edges are extracted directly from code
- No hallucinations, no guesswork
🧠 Deep Code Understanding
Detects:
- Routes
- JSX components
- Hooks
- Redux / Zustand / Jotai stores
- Function calls, reads, writes, and more
(10+ edge types supported)
💥 Blast Radius Analysis
Pick any node → instantly see:
“If I change this, what else is affected?”
Perfect for:
- PR reviews
- Refactoring
- Debugging side effects
📊 Node Scoring System
Each node gets a score based on:
How much of your app depends on it
This is powered by a custom algorithm (not AI).
📄 Smart Summaries
For each node, you get:
- Business summary
- Technical summary
- Security insights
Because the graph provides context, summaries are:
- More accurate
- Token-efficient
🧩 Code + Commit Insights
- View code directly from the graph
- Compare commit differences between nodes
Performance
- Tested on 2,500-node project
- Graph built in ~22 seconds
- Summaries generated in ~25–30 minutes
Total token usage: ~2M (very efficient due to graph context)
Real Use Cases
👥 Teams
- Faster onboarding (no more “read the whole repo”)
- Easier knowledge transfer
- Visual PR reviews
🧑💻 Solo Developers
- Understand complex logic faster
- Catch hidden issues
In one test, the tool detected:
Sensitive payment data being logged in server logs of a popular public project
🌍 Open Source Maintainers
- Share graph → contributors understand instantly
- Reduce onboarding friction
Why This Matters (Especially Now)
As more developers rely on AI:
- Code gets written faster
- But understanding gets weaker
This tool is built to solve exactly that:
Bring back clarity and control over your codebase
Limitations (For Now)
-
Best support for:
- React
- Next.js
- Node.js / Express
Edge accuracy: ~95% (some misses possible)
Route scoring still needs improvement
What’s Coming Next (Cloud Version)
Alongside the open-source version, I’m building a cloud version with:
- Chat with your graph (LLM-powered navigation)
- Shareable graphs
- Team collaboration features
- GitHub integration
- Visual PR review workflows
Demo
The demo video shows a graph built on the Keystone repo (a well-known headless CMS).
Demo => https://www.youtube.com/watch?v=G27jKbVUsTo
Even in such a mature project, the tool was able to surface potential security issues.
Links
- GitHub: https://github.com/devlensio/devlensOSS
- Waitlist: https://devlens.io
Final Thoughts
This started as a personal problem:
“I don’t want to lose understanding of my own code.”
Turns out, it might be a bigger problem than I thought.
If you’ve ever:
- Felt lost in a large codebase
- Struggled with onboarding
- Worried about hidden side effects
You might find this useful.
Would love to hear your thoughts 👇
Top comments (0)