See how the system fits together
Explore routes, components, functions, and state as one connected architecture map.
Best for: Onboarding and architecture discovery“Find the path from login to checkout”
$bun run devDevLens maps the files, functions, routes, and dependencies in your repository. Explore how the system fits together and see what a change could affect before you merge it.
DevLens connects files, functions, routes, and state into one explorable model—so you can understand the architecture and its dependencies before changing code.
Reveal every component, route, hook, and module connected to a selected file.
Explore an unfamiliar architecture without tracing imports across dozens of files.
Read a concise product and technical explanation on every graph node.
02:18 / GUIDED WALKTHROUGHFollow DevLens as it scans a production-style Next.js project, extracts its relationships, and turns disconnected source files into an explorable dependency graph.
devlens / product-walkthroughREAL REPOSITORYREPOSITORY → GRAPH → ANSWERSWeb, CLI, Agent Skill, and MCP are four simple ways to access the same understanding of your codebase.
Scan once.
Query anywhere.
Explore routes, components, functions, and state as one connected architecture map.
Best for: Onboarding and architecture discovery“Find the path from login to checkout”
$bun run devAll four interfaces read the same analyzed graph—no duplicate scans and no separate source of truth.
Understand impact, review changes, guide AI, and align your team.
See every direct and transitive dependency before editing.
Connect changed files to the screens and modules they affect.
Give agents compact structural context instead of entire files.
Keep the team aligned on the same architecture view.
Use Codespaces or your operating system, run three commands, and inspect the result.
Prefer local setup? npm, macOS, Linux, and Windows installers are included below.
In GitHub choose Code → Codespaces → Create codespace, or use the installer for your operating system.
$npm install -g @devlensio/cli$devlens analyze .$devlens overviewdevlens overview confirms the framework, graph size, routes, and central nodes.
Select a changed file to reveal its downstream impact before the pull request is merged.
IMPACT ANALYSIS READY
Managed sync, PR impact, and shared graph views—coming to DevLens Cloud.
Join the first releasecloud.pipeline.ymlincrementalGitHub events update only the relationships that changed.
01 / 04What it does, how it runs, and where your code goes.
An open-source map of your JavaScript or TypeScript codebase—files, functions, routes, and their relationships.
EARLY ACCESS / OPENGive every plan, change, and review the same system context.
Use DevLens locallyBe first to try managed sync, shared graphs, and PR impact.