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.
Explore a sample Screenatlas canvas
Try it
Grab the canvas. Follow a
journey.
50%
src/badge.tsx → Browse
/ Shop 0.12% changed
One shared badge changed. Slide to see the difference.
Your app stays local. The canvas above uses pre-captured sample screens.
One little change.
A
bigger
picture.
That button lives on eleven screens.
Screenatlas follows your
imports to find them.
YOU CHANGE THE CODE
src/components/badge.tsx M
const badge = {
background:
− "#f4d4c9"
+ "#e8844e"
};
Save your file. Live mode takes it from here.
SCREENATLAS FOLLOWS THE IMPORTS
badge.tsx3 routes6 shots
Only what you touched.
Everything else stays put.
Retake the affected steps on phone and desktop, then review them against the baseline you accepted.
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?
This page’s interactive demo uses pre-captured images of 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.