Open source · npm · zero dependencies
The map of your running app.
Point Screen Map at your dev server. In one command you get a screenshot of every route, a graph of how they connect, and a place to leave notes that become tracked work. It finds the screens your nav forgot.
$ npx @excellent-so/screen-map build✓ 320 screens · 6781 edges · 123 orphansNext.js App Router · Node ≥20 · fully local, no account · MIT
Your app got too big to see.
Hundreds of routes, and no current-by-construction picture of any of them. So you read code, click through one page at a time, or keep a hand-drawn map that's stale the day it's drawn.
Too big to hold in your head
Any static map is stale the day it's drawn. The app changes faster than the picture.
States are invisible
Cold-start, loading, error, populated — distinct UX moments no one audits systematically.
Flows go unchecked
Thousands of links, but nothing renders the graph — so orphans and dead-ends hide.
Feedback has nowhere to land
A UX finding that points at an exact screen and survives until it's fixed.
Five things, one command.
Enumerate, capture, graph, review, route. Each one already existed somewhere; Screen Map is the first to do all five, locally, from your real running app.
Every route, including the orphans.
Screen Map reads your framework router and lists every screen — even the pages nothing links to. A link-crawler structurally can't find those. This one enumerates them for you.
Screenshots of the real running app.
It drives headless Chrome against your dev server and captures every route — real pages, real data, real dynamic routes. Loading and empty states too, not just the happy path.
The navigation, drawn from your source.
It derives the flow graph from your <Link>s, router.push and redirect calls, then validates it against a live crawl. Orphans (no way in) and dead-ends (no way out) light up.
A place for feedback to land.
A local board grouped by section, the flow graph, durable multi-select notes, before/after diffing, and a note → agent → refresh loop. Feedback that points at exact screens and survives until it's fixed.
Findings become tracked work.
Turn a note into a markdown brief, a GitHub issue, or — for Excellent users — a task on the ship/verify gate. One finding in, tracked work out.
No tool did all five — so we built it.
The market splits along axes Screen Map fuses. Each half exists somewhere; the combination didn't.
| Capability | Screen Map | Storybook | Chromatic / Percy | SEO crawlers | agent-browser |
|---|---|---|---|---|---|
| Enumerate routes from the framework router | — | — | — | — | |
| Screenshot the real running app | components | cloud | |||
| Nav-flow graph from your source | — | — | from a crawl | — | |
| Durable review loop | — | approve/diff | — | — | |
| Fully local, no account | — | — |
The unoccupied fusion — a code-derived nav graph tied to locally-screenshotted real routes with a durable review loop — is exactly what Screen Map is.
The moat
It finds the screens your nav forgot.
Discovery is the union of two passes: a router-walk that enumerates every route in your code, and a running-server crawl that renders your real app. Their difference is the payoff — a route that exists in code but nothing links to, demonstrated, not just guessed.
$ screen-map build• enumerate (router-walk) — 320 screens• crawl (running-server) — 197 reached• graph — 6781 edgesproven orphans (walk ∖ crawl): 123One command. Zero config.
Start your dev server, run one command, and the browsable map opens in your browser. Everything lands in .screenmap/ — gitignore it.
- Zero runtime dependencies — installs in one package.
- Finds your system Chrome, or fetches one on demand.
- Never bundles a browser. Never a hidden postinstall.
- Works with any framework via crawl; the walk adds Next's App Router today.
# 1. your dev server is running$ next dev# 2. map it$ npx @excellent-so/screen-map build# 3. open the browsable map$ npx @excellent-so/screen-map openFindings become tracked work.
A note you leave in the viewer becomes a portable finding — the exact screens, live URLs, screenshots, and graph signals. Route it three ways, no third-party token required.
Markdown
anyoneThe default. Appends a findings brief and copies it for your agent. Needs nothing.
GitHub issue
any repoOpens an issue via the REST API with routes, shots, and signals. One token.
Excellent task
ExcellentLands on the ship/verify gate — credential-free, through the local MCP.
Screen Map is the map; Excellent is the back end. Screen Map never holds a Slack or Linear token. The Excellent adapter lands one finding as a task — and Excellent fans it out through its own integrations hub, encrypted at rest on your machine.
See ExcellentWherever your code lives.
A codebase inspector belongs where the code lives. One package powers every channel.
npx
Zero install, first touch. npx @excellent-so/screen-map build.
devDependency
Pin it for your team. npm i -D @excellent-so/screen-map, then a package.json script.
Global
npm i -g @excellent-so/screen-map — a screen-map command from anywhere.
VS Code + Open VSX
The map, inside your editor. Works in Cursor, Windsurf, and VSCodium.
Map your app in one command.
Zero-config, zero-dependency, fully local. It finds the screens your nav forgot — and turns what you find into tracked work.
MIT licensed · free forever · local-first