DEV Community: Me

I built an AST-powered visualizer for Reactjs, Next.js to solve my own architectural debt (and 50+ devs just joined the waitlist)

Me — Mon, 18 May 2026 21:06:42 +0000

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!

# I Built a Tool That Turns Your React/Nextjs Codebase into a 2D Graph (No AI Mapping)

Me — Mon, 23 Mar 2026 14:14:32 +0000

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.

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 👇