Skip to content
Projects

Dammyjay93/flowmap

View on GitHub

Dammyjay93/flowmap has 17 GitHub stars and 0 forks. GitHot measured +1 stars in 24 hours. Last checked 2026-11-15 01:44 UTC. Last push 2026-11-09.

How these counts are measured

17 stars0 Forks +1 in 24h

Measured star growth

in 24h
+1
in 7 days
Collecting history
in 15 days
Collecting history
in 1 month
Collecting history

Net star changes over overlapping periods, not daily totals. Missing measurements are left blank. Stars measure attention, not software quality.

About

See every screen of your web app as the code renders it, compare it with live, and send changes back to your coding agents.

Developer Tools

README.md

Original

Flowmap

npm CI MIT licence

See every screen of your web app as the code renders it, compare it with live, and send changes back to your coding agents.

Every screen of an admin app on one canvas, with the flows between them. The canvas zooms into the dashboard and pans along the flow.

Quick start

Open your coding agent (Claude Code, Codex or Cursor) in your project and paste:

Set up Flowmap: run npx useflowmap setup and do what it prints.

Your agent writes a recipe for each screen, starts your app and captures every screen. You watch them appear in your browser. Flowmap needs Node 22 or later and git.

Every screen and every state

Each route, tab, dialog, empty state and step of a flow, signed in or not, captured from the code at a commit. Each page keeps its states in a menu, so a drawer, a dialog or a filter is one click away.

The tasks page in Flowmap. Its menu of states opens, and choosing Create task drawer shows that state.

Compare with live

Flowmap outlines what changed on each screen and names each element that was added, removed, moved or looks different. Drag between live and your branch.

The dashboard compared with live. The handle is dragged left and right, showing live on its left and the branch on its right, with the changed area outlined.

Mark what should change

Drag over a part of a screen and write what should change. Your agent gets it as a task, with the element under your mark.

Comment mode on the users page. A box is dragged around two buttons, the request is typed and sent to the agent, and a numbered pin appears.

Review the agent's work

When the agent is done, see before and after side by side. Approve it, or send it back with a note.

A task ready for review opens from its pin: the request, the agent's note, before and after pictures. Approve is clicked.

Versions side by side

Ask for several versions of a screen. They appear next to each other, and you choose one.

Three versions of the dashboard's stat cards side by side. Version B is selected and chosen.

A check before "done"

Before your agent says a change is done, it captures every screen again and sees each one its change touched, including the ones it did not mean to change.

$ npx useflowmap check --base-url http://localhost:5410
Checked 461f5222 against e16c87f2
  dashboard at 1440: changed
    Added: Export report
    Added: New sale
    Removed: Download
  dashboard at 390: changed
    Added: Export report
    Added: New sale
    Removed: Download
  users at 1440: same
  users at 390: same

Connect your agent

Flowmap runs on your computer, with no account. Connect Claude Code, Codex or Cursor in one step, and your agent learns how to use Flowmap from the server itself.

The Connect panel, with a button for Claude Code, Codex, Cursor and any other MCP client.

Learn more

  • Reference: commands, MCP tools, state recipes, sign-in for captures, and settings.
  • Changelog: what each release changed.
  • Contributing: build Flowmap, run the tests and send a change.
  • Security: report a problem privately.

Licence

MIT. The viewer's icons are Solar by 480 Design, licensed CC BY 4.0. The agent logos are from Simple Icons (CC0). Each logo is a trademark of its owner.