Matt Waite
Tools
screen-mapComing next

Every screen in your app, on one board.

One command screenshots every route of your running app, graphs how the routes link, and finds the pages nothing links to.

npx @excellent-so/screen-map buildnpm

FreeMITRuns on your machineNo runtime dependencies

localhost:4610
screen-map: Every screen, one board

What you get

  1. 01

    Find what your nav forgot

    Screen Map reads every route from your app folder, so it finds the orphans no link reaches and the dead ends with no way out.

  2. 02

    See the screens behind screens

    A wizard’s steps, a page’s tabs, a tour’s slides. It reads them from the route’s own source and screenshots each one.

  3. 03

    Hand the fix to your agent

    Select screens, write a note, and copy a brief for your coding agent. When it’s done, recapture the screens and approve.

01

How the routes link

The flow graph shows each page's own links, with the sidebar links every page shares hidden until you ask for them. Orphans get a dashed outline, dead ends a bar on the right, and the onboarding steps it found in the code are linked in order.

localhost:4610
screen-map: How the routes link
02

The map as a table

The table lists each screen with its signals, captured states, open reviews and versions. Filtered to Settings, it shows an API keys page that no tab links to and a cancellation page with no way back.

localhost:4610
screen-map: The map as a table
03

A note for your agent

Select a screen, write what's wrong and copy a brief for your coding agent. The brief names the route, its source file and the screenshot to read first.

localhost:4610
screen-map: A note for your agent
04

Check the fix, then approve

Once the page was fixed, Refresh screens on the note recaptured it and re-read its links. The page now links to 12 others, the dead-end count drops to 1, and the change waits for your Approve.

localhost:4610
screen-map: Check the fix, then approve

How it works

  1. 1

    Run your app

    next dev   # http://localhost:3000
  2. 2

    Build the map

    npx @excellent-so/screen-map build
  3. 3

    Open the board

    npx @excellent-so/screen-map open

Details

Works with
Next.js App Router for routes, states and orphans. Any app for the crawl
Needs
Node 20 and Chrome (Chromium, Edge and Brave work too)
Writes
The map to .screenmap/ in your project
Tracked work
A markdown file or a GitHub issue
Dependencies
None at runtime
License
MIT

Why I made it

It finds the screens your navigation forgot, which a link crawler can’t see.

Matt Waite

Try screen-map.

Free and MIT licensed. Coming soon: the code goes public at launch.

npx @excellent-so/screen-map buildnpm