See every UI change before your users do.
Happo catches visual regressions of every kind on every pull request, from a button that moved to a contrast that dropped to an animation that changed. In Chrome, Firefox, Safari, and Edge, on iPhone and iPad, and in your native iOS and Android apps.
Start free with 5,000 snapshots a month. No credit card needed.
How Happo works
The life of a pull request
1Commit
You change one line of CSS.
A little less padding on the button. It looks right on the one screen you checked. The button is on a hundred others.
2Render
Happo renders every story, in every browser.
Your Storybook stories, Playwright and Cypress tests, or your own pages: Happo screenshots them in Chrome, Firefox, Safari, and Edge, and in Safari on iPhone and iPad. In parallel, so you aren’t waiting long. Building a native iOS or Android app? Upload screenshots from your own test runner and they get the same treatment.
3Diff
It finds what changed, and what broke.
Three screens look different. One now has an accessibility violation: its text no longer has enough contrast. One animation lands somewhere new. They all land in the same comparison. Tiny rendering noise below your threshold is filtered out, and every diff is deterministic: you can see exactly why two pixels differ.
4Review
You review it in one place, fast.
Side by side, diff, or swipe. We care a lot about how fast you can get through a review, so the keyboard shortcuts your fingers already know work here too. Accept what you meant, reject what you didn’t, and the pull request knows.
5Merge
Merge with confidence.
The Happo check turns green when someone signs off. Then you get back to the fun part.
Get started
Start in five minutes.
No onboarding project. Your first diffs show up on your next pull request.
Sign up with GitHub or Google
Create a project and grab its API key.
Add Happo to your repo
npm install --save-dev happoThen a
happo.config.tswith your key and the browsers you care about.Run it in CI
npx happoEvery pull request gets a status that links to its diffs.
Create your free account
One click, and you’re in. Bring your team later.
- A free plan with 5,000 snapshots a month in Chrome
- No credit card needed
- Unlimited users on every plan
Already have an account? Sign in
With Happo, you can easily integrate visual testing into your existing development workflow, and its support for CI/CD ensures you can catch regressions as early as possible.
Ashley InnocentApidogThe problem
You changed one component. It's used on 140 screens.
A shared button is a tiny diff in your pull request and a big one in your product. Which screens did it just touch? All of them. Which ones did it break?
padding: 8px 16px;- Search
- Checkout
- Listing
- Inbox
- Profile
- Settings
- Trips
- Wishlist
- Reviews
- Payments
- Sign up
- Calendar
- Help center
- Log in
- Messages
- Onboarding
- Invoices
- Team
- Reports
- Pricing
- Billing
- Alerts
- Integrations
- Home
+ 116 more screens+ 128 more screens
Used on 140 screens. Which ones will it break?
How many times did you think your change was contained only to discover that ten other teams started using what you built, and your change breaks three of the ten? Without Happo, you might not know.
Adam NearyAirbnbHappo shows you all 140 before you merge.
Visual regressions
Layout, accessibility, and motion. One review.
Happo catches visual regressions of every kind: the button that moved, the contrast that dropped, the animation that changed. They all land in the same comparison, so one review covers them.
An order summary card. Before, the Place order button is dark teal with its label centered. After, the button is a lighter teal and its label sits low and to the right. Happo highlights the button as the only change.
+1 new accessibility violationColor contrastSerious
Text needs a contrast ratio of at least 4.5:1 against its background (WCAG 2 AA).
Element<button class="Button">Place order</button>
- Diffs under your threshold are filtered out
- No anti-aliasing or sub-pixel noise
- A flake reported once stays ignored
Most tools sell accessibility testing separately, and few test animations at all. In Happo it’s all one review, and accessibility testing is included on every plan.
Our Playwright E2E tests passed successfully, as the app's functionality remained intact. However, Happo detected the unwanted changes in the text's color and positioning, which would have been noticeable and disruptive to users.
Arne Zeisingre:capAccessibility
Accessibility problems only go one way.
Turn on accessibility checks in a big app and you’ll find thousands of issues on day one. Happo lets the ones you already have through and stops new ones at the pull request, so your team keeps shipping without a big cleanup first.
Open accessibility violations
Main branch, end of each day
142 open
- 0 critical
- 18 serious
- 71 moderate
- 53 minor
| Day | Open violations |
|---|---|
| Day 1 | 2,184 |
| Day 2 | 2,184 |
| Day 3 | 1,720 |
| Day 4 | 1,702 |
| Day 5 | 1,215 |
| Day 6 | 1,190 |
| Day 7 | 1,190 |
| Day 8 | 1,190 |
| Day 9 | 860 |
| Day 10 | 802 |
| Day 11 | 760 |
| Day 12 | 540 |
| Day 13 | 516 |
| Day 14 | 516 |
| Day 15 | 516 |
| Day 16 | 380 |
| Day 17 | 301 |
| Day 18 | 262 |
| Day 19 | 198 |
| Day 20 | 160 |
| Day 21 | 160 |
| Day 22 | 142 |
This week’s pull requests
Restyle the checkout button #2481
Happo 1 new accessibility violation (color contrast)
Approval blockedAdd saved addresses #2484
Happo No new violations. Existing issues: 760, unchanged.
PassedLabel the icon-only buttons #2490
Happo 220 existing issues fixed. 540 left.
Passed
Fix the contrast, push again, and the check goes green. Nobody waits on a cleanup they didn’t cause.
Start with the issues you have
Turn on accessibility checks today, even with thousands of known issues. Existing violations are tracked, not blocked, so nobody’s pull request gets stuck on a problem they didn’t cause.
Stop new ones at the pull request
When a change adds a violation, Happo blocks approval and shows which element broke which rule, right next to the visual diffs. The fix happens while the code is still fresh.
Watch the number go down
Violations are graded by impact and charted over time, so you can see your team’s progress and show it to others. It’s the reporting you’ll want for the European Accessibility Act.
For teams coding with AI agents
Give your agents eyes.
Claude Code and Cursor ship UI changes in minutes, and they can't see what they broke. With Happo's MCP server they read the same diffs you review, fix their own regressions, and hand you a pull request that already passes.
- You
Tighten up the settings header, then check Happo before you hand it back.
- Agent
Done, pushed 4e1c9a7. Checking Happo.
- happo
list_comparisons_for_sha({ sha: "4e1c9a7…" })1 comparison · needs review - happo
get_comparison_details({ comparison: 8812 })2 diffs
Header / default · Safari: the header lost its padding
Button / default · accessibility: +1 color-contrast (serious) - Agent
My gap shorthand broke the header in Safari, and the lighter text fails contrast. Fixing both. Pushed b71e0d4.
- happo
list_comparisons_for_sha({ sha: "b71e0d4…" })Happo: no diffs - Agent
All clear in every browser. Over to you for review.
The diffs are facts, not opinions
Happo's diffs are pixels, accessibility violations, and accessibility trees you can trace to the exact change. That's what makes them safe to hand to an agent: it reads facts, not another model's opinion.
More independent agents, same review
Agents connect with OAuth and act as you, with your permissions, and everything they do is attributed to you. Revoke access any time from your account. They clear up their own misses before you look; the approval stays with a person.
Add Happo to your agent
One hosted server at https://happo.io/api/mcp. You sign in with OAuth the first time your agent uses it, with no tokens to paste.
- Claude CodeTerminal
$ claude mcp add --transport http \ happo https://happo.io/api/mcp- Cursor.cursor/mcp.json
{ "mcpServers": { "happo": { "url": "https://happo.io/api/mcp" } } }- Claude DesktopSettings → Connectors → Add custom connector
https://happo.io/api/mcp
What your agent can do
list_comparisons_for_shaFinds every Happo comparison for the commit it just pushed.get_comparison_detailsReads the visual diffs, added and deleted snapshots, accessibility changes, and ARIA snapshots.approve_comparison / reject_comparisonResolves a review, when you want it to. Most teams keep that for a person.report_flakeMarks a spurious diff as a flake, so it is ignored from then on.
Every browser
Every browser your users have. Including the one in their pocket.
Most visual testing stops at Chrome in one viewport, on a small sample of your app. Your users are on Safari, on iPhones, on iPads in landscape, in light mode and dark. Happo renders every snapshot in the browsers you pick, so you see the bug only one of them has.
Chrome1024 × 768No diffs
Firefox1024 × 768No diffs
Edge1024 × 768No diffs
SafarimacOS · 1024 × 7681 diff
iOS SafariiPhoneNo diffs- iPad SafariLandscapeNo diffs
Only Safari pushed the price under the button. Test in Chrome alone, and this ships.
Light and dark, every time. Render a target in each color scheme and Happo compares both, so the dark mode nobody checked by hand gets checked too.
- ChromeLight modeNo diffs
- ChromeDark modeNo diffs
- Accessibility
- Light and dark mode
- Reduced motion
- Viewports of all sizes
Happo supports the latest versions of most browsers and emulators. Their speed of image comparison is impressive. They also have GitHub and CI integration and plugins to support Storybook and Cypress directly.
Denitsa KulezichNewsKitNew Animation testing
Your animations are UI too.
Spinners, toasts, skeletons, and transitions break like everything else. Visual tests usually freeze them and look at one frame. Happo tests how they move.
Seeking, not recording
Happo pauses each animation and renders it at exact times. The same animation gives the same frames on every run, so there is no flaky video to squint at.
Frame-by-frame diffs
The frames are stored as one animation and compared one by one. In the review, the frames that changed are marked, and you can pause and step through them.
mode: 'auto'Turn it on for a whole target. Happo captures motion where there is some and a still image everywhere else.
targets: {
chrome: {
type: 'chrome',
viewport: '1024x768',
animate: {
mode: 'auto',
prefersReducedMotion: false,
},
},
}CSS animations and transitions, the Web Animations API, SVG, requestAnimationFrame, scroll-driven animations, plus drivers for Lottie, canvas, and video. An animated snapshot counts as three snapshots.
Founder-led
When you email support, Henric or Joe replies.
We’ve spent our whole careers shipping UI, and we built the first version of Happo in 2014, while working together at a San Francisco startup. We still build it, support it, and answer every email ourselves. No ticket queues, no VC-driven roadmap, no upsell.
Happo is self-bootstrapped: no investors, so the only people we answer to are the teams who use it. We know how fragile UI gets in a big codebase, because we’ve broken it ourselves.
Replied in 7 minutes
- 2014
Working together at a San Francisco startup, we build the first version of Happo.
- 2016
It gets its name, from a drawing by Henric’s three-year-old nephew.
- 2017
Happo becomes a product. Self-bootstrapped from day one.
- 2018
Storybook support ships.
- 2020
Cypress support ships.
- 2021
Playwright support ships.
- 2024
Single sign-on for bigger teams, and dark mode.
- 2025
Accessibility testing, in the same review as everything else.
- Today
Animation testing, an MCP server for your agents, and a faster way to review.
My experience with Happo has been so amazing. I feel like I am talking with friends whenever I reach out and you guys have the best support ever. Stay awesome!!
Colin McParlandtheScoreIn their words
Change UI with confidence.
Engineers at Monzo, Cypress, re:cap, and beyond use Happo to see what a change really touches before it ships.
Happo allows us to make changes to components used on hundreds of screens and upgrade core UI dependencies with confidence. It has been a big productivity boost over our previous workflow.
Phil GlassMonzoGive Happo a try. Convince your team to test it out. You'll have better tests and a better looking application that will not change day to day for the worse.
Gleb BahmutovCypressWhile CI functional tests are helpful they can't catch visual issues like layout shifts or SVG chart rendering. Happo has become essential to our testing strategy ensuring high-quality products with minimal effort.
Samuel WeirichPILOSHappo gives us the confidence that we are not introducing any unwanted visual changes in our pull requests. Something that pure end-to-end tests cannot always cover.
Adrian Burkhartre:cap
Pricing
Pricing you can read.
You pay for the snapshots you take, and your whole team comes along.
Start free
5,000snapshots a month in Chrome
- No credit card needed
- Unlimited users
- Accessibility testing included
Usage-based
Per snapshotso the bill tracks what you test
- Unlimited users
- Unlimited concurrent runs
- More browsers as you grow
Enterprise
1M+snapshots a month, for big teams
- SAML single sign-on
- Support in US and EU time zones
- SLAs
Happo to the rescue! It's a direct competitor to Percy, but it's much cheaper, supports more browsers, and is easier to use. Another big selling point? It supports Cypress integration.
Boris YordanovToptalFrom the blog
View all posts
Keep programming fun.
Set it up this afternoon. Your next pull request shows you every pixel it changed, in the browsers your users have, before they do.
Start free with 5,000 snapshots a month. No credit card needed.