Local by default.
Captures and baselines stay in your project as plain images and JSON. No telemetry.
OPEN SOURCE. ON YOUR MACHINE.
Every screenyour agent touches,on one canvas.
Your whole web app, in the order people use it.
See what changed.
Keep the rest in view.
The real Screenatlas viewer, on a demo shop
Try it
The actual viewer. Exported read-only with
screenatlas export. Your own app stays on your machine.
One little change.
A
bigger
picture.
That badge reaches 13 of 22 steps.
Screenatlas follows your imports to find them.
YOU CHANGE THE CODE
src/badge.tsx M
export function Badge({ children }) {
return (
− <span className="badge">
+ <span className="badge badge-new">
);
}
Save your file. Live mode takes it from here.
SCREENATLAS FOLLOWS THE IMPORTS
badge.tsx13 steps26 shots
Only what you touched.
The 9 steps it does not reach stay put.
23 of the 26 retaken shots changed. Review them against the baseline you accepted, biggest change first.
The real thing,
screen by screen.
Every picture is the Screenatlas viewer,
taken by the script
that builds this page.
Review what changedGrouped by the file that caused it, biggest change first. On
your machine, accept a shot or a whole file, or flag it for your
agent.
See the pixels that movedSide by side, slider, flip or diff. On the home page only the
badges light up: 0.13% of its pixels.
The whole app, in order5 journeys, 22 steps, 44 shots on
phone and desktop, in the order people use them.
Problems a screenshot hidesA figure too wide for a phone makes the page scroll sideways.
Screenatlas says so and names the element.
Your agent writes it.
Now it can
see it.
Before-and-after crops, readable screens, and browser errors.
The same picture for you and your coding agent.
WHAT THE AGENT SEES
Give Codex the full picture.
Install the plugin in your app’s project. Your agent can set up journeys, capture changes, and review the screens it affected.
codex plugin marketplace add TomasSestak/screenatlas
codex
plugin add screenatlas@screenatlas
Install Screenatlas in your app first. Start a new agent session after adding the plugin.
Read the agent setup guide
All together.
All
yours.
Your running app. Your test data. Your machine.
Look beyond the pixels.
Catch invisible text, sideways scrolling, broken media, and failed requests.
Follow the whole journey.
Pages, dialogs, empty states, and form errors sit in the order users meet them.
Share the view.
Export a read-only atlas to a static host, or use the GitHub Action for PR reviews.
Next.js · TanStack · React Router · SvelteKit · Astro · Nuxt · Expo web
Any web app works. See the route adapters ↗Make it yours.
Start in your app’s directory.
Your first capture becomes your
baseline.
1
Install & discover
Find your routes and write a starter config.
2
Take your first shots
Every step, on phone and desktop.
3
Full setup guide ↗
Open the canvas
Keep it open. Live mode follows your saves.
bun add -d screenatlas playwright
bunx playwright install chromium
bunx screenatlas init
bunx screenatlas capture
bunx screenatlas serve
Your canvas → localhost:4600
Node 22+ · Playwright Chromium · A running web app
A few details.
Does it work with my framework?
Screenatlas captures anything that runs in a browser. Built-in adapters add route discovery and change detection for Next.js, React Router, SvelteKit, Astro, Nuxt, TanStack Router and Expo Router web. Other apps can use a file map.
Does the demo run my app?
No. The viewer on this page is the real Screenatlas viewer,
exported read-only with screenatlas export, showing
the demo shop in the repository. Install Screenatlas in your own
project to capture your app and review its changes.
Do I need to write tests or stories?
The init command finds routes and writes one starter step per page. Add Playwright actions for states such as open dialogs, validation errors and signed-in views. Your app needs repeatable test data.
How does it know what changed?
Screenatlas follows an edited file through the import graph to the routes that render it, then retakes the steps on those routes. Global styles and other files outside the graph can use explicit change rules.
Can it capture native mobile apps?
Screenatlas captures web apps in Chromium at phone and desktop viewport sizes. Expo Router web is supported; native iOS and Android screens are outside its scope.
What does it cost?
Screenatlas is free and open source under the MIT license. Install it as a development dependency and run it on your machine.
Build with an agent.
Keep your eyes on the app.
Make your atlas
Free. Open source. On your machine.