Every screen checked before you hand back the keys
At pickup, Walkaround photographs every screen of your app at every width. At return, after your next pull request, it walks around again and circles every new mark, graded by how deep it goes. Swirl marks get buffed out; a missing Pay button stops the build.
Checkout · 390 wide
PR #318 · return inspection- Rate
- First 5,000 photos a month free, then $4 per 1,000. Every seat is free.
- Runs in
- GitHub Actions, GitLab CI, CircleCI, Bitbucket Pipelines, Buildkite, Jenkins
- Shoots
- Chrome, Firefox, Safari and Edge, at any width you name
- Start
npx walkaround initadds one step to your CI file. First walkaround in about four minutes.
Choose a panel to open its screen above. Orange circles are new marks; the gray dashed one is noise Walkaround buffed out.At pickup the car is clean: this is your baseline.
Swirl marks get buffed out
Text anti-aliasing shifts by a pixel between machines. A shadow renders a shade lighter. Most screenshot tools flag all of it, and the team learns to click Approve without looking.
Walkaround renders both sides on the same browser build, then ignores changes thinner than the clear coat. You never see them, so you keep looking at the marks you do see.
On the Home screen: 1,204 pixels in the banner headline moved by one pixel. Buffed out, not reported.
The color changed
Someone renamed a design token and the Add to cart button went from blue to violet on one screen only. Nobody broke anything, but nobody meant it either.
Walkaround circles it, names the property that moved, and asks one question. If you meant it, sign it off and it becomes the new paint. If not, it goes on the pull request as a comment.
Something moved
A longer product name pushed the price onto a second line, and the Remove link slid under it. It only happens at 390 wide, on the one screen with the longest name.
Primer marks are layout: spacing, wrapping, alignment. Walkaround tells you how far the thing moved and at which widths, so you can see it is a phone problem before you open a phone.
Down to the metal
On Checkout at 390 wide, the Pay button is gone. A new sticky chat bar landed on top of it. This is the mark that costs money.
Bare steel stops the build. Walkaround posts the before and after on the pull request, fails the check, and will not let it merge until the panel is fixed or someone with the keys signs it off by name.
Decide how deep stops the build
Every team draws the line somewhere else. A design system team wants to hear about a color. A team shipping hourly only wants bare steel. Set the gauge once per project, and marks above the line are logged but never block a merge.
Flip the key tag to Return, then move the gauge.
Other lots, this morning
- 7:12Ferrow BikesPortland, OR · PR #2,114Bare steelPlace order slid under the cookie banner at 390 in Safari. Held, fixed in 38 minutes.
- 7:40Tallgrass ClinicOmaha, NE · PR #881PrimerAppointment times wrapped to two lines at 1000. Signed off by Priya N.
- 8:03Kettle Hill CoffeeAsheville, NC · PR #57Base coatBrand green drifted on 14 screens after a token rename. Put on the PR.
- 8:15PaydockAustin, TX · PR #3,402Clear coat3,880 pixels of font smoothing. Buffed out, nobody pinged.
- 8:31Okra TableNew Orleans, LA · PR #612Bare steelReserve button rendered 0 px wide in Firefox. Held.
- 8:52Northbeam TutorsMadison, WI · PR #1,090No marks212 photos, every panel clean. Merged.
We were approving 300 screenshot diffs a week without reading them. Now the PR says four things, and the Friday before Thanksgiving one of them was our checkout.Marisol Vega
Front-end lead, Ferrow Bikes · 14 months on the lot
Our designers sign off base coat themselves. I only get pinged when it is primer or worse.Dev Raman
Staff engineer, Paydock
Pay by the photo, not the seat
Everyone on the team can look, sign off and comment. You pay for the photographs Walkaround takes, and only the ones past your free allowance each month, to the cent.
60 screens × 3 widths × 20 PRs × 52 weeks ÷ 12 months. 10,600 past the free 5,000, at $0.004 each.
Pickup points
Your CI runs the walkaround and Walkaround posts the check back.
- GitHub Actions
- GitLab CI
- CircleCI
- Bitbucket Pipelines
- Buildkite
- Jenkins
Cameras
Real browser engines, the same build on both sides.
- Chrome
- Firefox
- Safari (WebKit)
- Edge
- Any width, 320 to 2560
Makes and models
Point it at a URL, a Storybook, or the tests you already have.
- React
- Next.js
- Vue
- Svelte
- Angular
- Storybook
- Playwright
- Cypress