We’ve all been there.
You open a Reactjs, Next.js project that started small. But after a few weeks of shipping fast, you have a sprawling network of Server Components, Client Components, nested routes, custom hooks, and state managers.
Worse yet, if your team is using AI tools to assist with writing code, your repository is likely growing 10x faster than anyone can actually read it.
A few months ago, I hit a breaking point. I found myself spending more time doing mental gymnastics trying to figure out how files were connected than actually writing code. I would merge a Pull Request, only to realize later that a small change in a server action completely broke a seemingly unrelated component on the other side of the app.
So, I decided to build a solution: Devlens.
The Problem with Generic AI Visualizers
When I looked at existing codebase visualizers, I noticed two major flaws:
- They were completely generic and didn't understand the intricacies of modern meta-frameworks like Next.js (e.g., the complex bridge between Server and Client layers).
- They relied entirely on AI to map out the codebase, resulting in frequent hallucinations about how files were structured, while costing a fortune in API tokens.
I wanted something different. I wanted a deterministic GPS for my code.
How Devlens Works Under the Hood
Devlens uses a dual-layered approach to provide architectural intelligence without the guesswork:
1. 100% Accurate AST Parsing
Instead of asking an LLM to guess your architecture, Devlens walks the Abstract Syntax Tree (AST) of your JavaScript/TypeScript files locally. It mathematically extracts every component, hook, utility, API route, and data store, mapping out every import, function call, and state mutation with zero hallucination.
2. Context-Aware Graph Layering
Once the map is generated, it applies a multi-pass scoring algorithm to determine which files act as the true bottlenecks or core pillars of your system. Only after the graph structure is locked does it pass the nodes to an LLM to generate highly concise technical summaries.
Because it feeds the graph's connections as structural context to the LLM, token usage is slashed drastically—analyzing a large repository uses fewer tokens than a single chat session with standard tools.
The Killer Feature: Finding the "Blast Radius"
The absolute main use case I built into Devlens—and what has kept me from breaking production builds—is Blast Radius detection and Developer Onboarding.
- The PR Review "Blast Radius": Instead of blindly merging PRs, it visually overlays your code changes and shows you exactly what other routes, hooks, or components will break across the repo before you hit merge.
- Zero-Friction Dev Onboarding: Drop a new hire into a massive, unfamiliar Next.js repository. They can explore the interactive graph, read contextual summaries of the modules, and understand the core architecture in hours instead of weeks of manual KT.
[ Your Modified Component ]
│
├──► Affects: Custom Hook (useAuth)
│ │
│ └──► Breaks: Profile Page Route (/profile)
│
└──► Affects: Server Action (updateUser)
Before you approve a Pull Request or run a major refactor, Devlens calculates the ripple effect of a change. It makes code reviews incredibly straightforward because you aren't guessing what might break anymore; you can see it layout on an interactive graph.
From Side Project to Validation
I open-sourced the local core engine, and a few days ago, I opened up a waitlist for a Cloud version that automates visual PR summaries and adds a Graph-Aware AI Chat interface (an LLM that reads your graph metadata to answer architectural questions without hallucinating your folder layout).
Within 60 days of launching the basic open-source version, 50+ developers joined the cloud waitlist completely organically.
For a framework-specific developer tool, this small milestone means the world to me. It validates that architectural debt, onboarding headaches for new hires, and PR review blindness are universal pains we are all fighting.
Check it out (It's Open Source!)
If you are currently wrestling with a growing React/Next.js/Node.js codebase, I would love for you to try out the engine and give me your harshest feedback.
⭐ GitHub Repo: github.com/devlensio/devlensOSS
🚀 Cloud Beta Waitlist: devlens.io
Have you worked with tools to handle codebase mapping before? How does your team currently prevent breaking changes during massive refactors? Let’s talk in the comments!
Top comments (0)