Happo (happo.io) is a hosted service for visual regression and accessibility testing. It takes screenshots of your component variants in browsers including Chrome, Firefox, Safari, Edge and iOS Safari, compares each one with a baseline from your main branch, and reports the differences on the pull request. Happo
Design Bug Bot is 21st's design reviewer for GitHub pull requests, installed through the 21st GitHub App. It reads the React code a pull request adds or changes, checks it against the components, tokens, spacing and type scale your repository already uses, and suggests fix code. Use Happo when you need proof that approved UI still looks the same in every browser you support; add Design Bug Bot when the recurring problem is new UI that renders fine but was not built from your design system.
Disclosure: This comparison is published by 21st, which makes Design Bug Bot. It is based on official documentation and pricing pages checked on September 14, 2026. It is not a head-to-head benchmark: we have not run both products against a common set of changes.
Happo and Design Bug Bot at a glance
| Happo | Design Bug Bot | |
|---|---|---|
| Question it answers | Did the UI change against an approved baseline, and does it pass accessibility checks? Happo | Does new or changed UI follow the components and tokens the repository already has? |
| What it reads | Screenshots of component variants from Storybook, Playwright, Cypress or your own runner. Storybook docs | The pull request diff and the existing UI code in the repository. |
| Browsers | Chrome, Firefox, Edge, Safari, iOS Safari and iPad Safari targets. Configuration | No cross-browser runs: one isolated React render, with desktop and mobile widths when it succeeds. |
| What counts as expected | A baseline report, found from the pull request's merge base. CI docs | Your own components, tokens, spacing and type scale. No stored baselines. |
| What you act on | Side-by-side diffs to accept or reject. Getting started | Findings with file and line when available, plus suggested fix code. |
| Effect on merging | A diff sets the PR status to failure until someone approves it. CI docs | Advisory: one review comment that updates, and a check per reviewed commit. |
| Pricing model | Monthly snapshot allowance, with a free Chrome-only tier. Happo pricing | 5 free successful reviews, then AI credits. Details |
What Happo does well
Browser coverage. Happo's targets include Safari, Edge, iOS Safari and iPad Safari next to Chrome and Firefox, and the iPhone and iPad targets run at fixed device viewports. Happo configuration
It plugs into the tests you already have. A Storybook module captures your stories, and Playwright and Cypress suites call happoScreenshot once a component reaches the state you care about. Screenshots render on Happo's infrastructure. Storybook, Playwright, Cypress, getting started
A clear CI contract. Happo finds the baseline starting from the merge base, posts a status to GitHub, and turns it green once the diffs are approved on the comparison page. Happo CI
Reach past the browser. Native iOS and Android teams render their own screenshots and upload them through the API. Accessibility checks built on axe-core are included on every plan. Native apps, accessibility, pricing
Agent access. Happo's MCP server lets clients such as Claude, ChatGPT and Cursor list the comparisons for a commit, read their diffs, approve or reject them, and report a flaky diff. Happo MCP
The question a screenshot cannot answer
Picture a pull request that adds a pricing card. Happo renders its new story in each configured browser, and every screenshot looks crisp. With no earlier version in the baseline, the card appears as added snapshots rather than a diff. Happo MCP
What those images cannot tell a reviewer is that the card reimplements the Card component you already have, uses padding off your spacing scale, or sets the price in a one-off text size. Those are questions about the code, which is where Design Bug Bot works.
Design Bug Bot reads the diff against your repository's existing components and tokens. A finding explains the problem, points to the file and line when available, and includes suggested fix code you can copy or hand to a coding agent. It also looks for layout risks such as horizontal overflow, fixed widths and actions hidden on mobile, and for dependencies the change does not need.
It attempts an isolated render of the changed pages and components in a disposable sandbox. A successful render adds screenshots and visual checks at desktop and mobile widths; otherwise the findings arrive as code-backed recommendations.
The limits matter to a Happo user: Design Bug Bot keeps no approved baselines, runs no cross-browser pixel comparison, does not block merges, and works with React codebases on GitHub. It reviews a different layer of the same pull request rather than replacing a snapshot suite.
Picking one, or running both
These are illustrative situations, not results from testing either product.
A layout that breaks only in iOS Safari. A style renders correctly in Chrome but wraps badly on the iPhone viewport. That is Happo's job: on a plan that includes iOS Safari, the diff shows the breakage. Design Bug Bot would not target this, because it does not compare browsers.
A new component that duplicates an old one. The pricing card above gives Happo nothing to compare against. Design Bug Bot can point to the existing Card and the spacing token, with fix code, in the same pull request.
A design refresh that touches most snapshots. A new radius and spacing scale changes nearly every story in every browser. Happo gives the team one place to approve it, and an agent can fetch comparison details through the MCP server while a person decides. Design Bug Bot can check that changed components use the new tokens instead of copied values.
For a web team that already runs Happo, the natural setup is Happo as the regression gate and Design Bug Bot as an advisory reviewer on UI pull requests. Native iOS and Android screens stay with Happo's API workflow, since Design Bug Bot is built for React web codebases.
Happo pricing
Listed on Happo pricing on September 14, 2026:
- Free: 5,000 snapshots per month in Chrome, no credit card required.
- Starter: $149 per month for 50,000 snapshots in Chrome and Firefox.
- Growth: $399 per month for 150,000 snapshots, adding Safari.
- Pro: $749 per month for 300,000 snapshots, adding iOS Safari and Edge.
- Enterprise: custom pricing for 1M+ snapshots.
Paid plans charge $0.006 per additional snapshot. A snapshot is one screenshot of a component variant in one browser, so monthly usage is variants times browsers times runs. Design Bug Bot reviews draw on AI credits instead; see the trial and billing details.
Evaluating Happo and Design Bug Bot on your repo
- Pick two real pull requests: one that adds a component and one that changes a shared token. Note what a good review would say about each first.
- Run Happo on the browsers your users actually have, and apply the pricing formula to your story count to see which tier that coverage needs.
- Run Design Bug Bot on the same pull requests. For each finding, check that the component or token it names exists, that the fix code keeps behavior, and whether it had screenshots or was code-backed.
- Assign ownership: who approves Happo diffs, who acts on design findings, and whether Happo's status becomes a required check while Design Bug Bot stays advisory.
For the broader picture, read visual regression testing vs AI design review, or compare another cross-browser service in Percy vs Design Bug Bot.
Open Design Bug Bot and run it on your next pull request that adds UI.
Frequently asked
- What is Happo used for?
- Happo (happo.io) is a hosted visual regression and accessibility testing service. It screenshots component variants from Storybook, Playwright, Cypress or a custom runner in browsers such as Chrome, Firefox, Safari, Edge and iOS Safari, then compares them with a baseline so a pull request shows what changed.
- Can Design Bug Bot replace Happo?
- Not for cross-browser regression. Design Bug Bot keeps no approved baselines and does not compare browsers, so a bug that appears only in Safari is outside its scope. It answers a different question: whether changed React UI reuses your components, tokens, spacing and type scale.
- How much does Happo cost?
- On September 14, 2026, Happo's pricing page listed a free plan with 5,000 Chrome snapshots per month and paid plans at $149, $399 and $749 per month for 50,000, 150,000 and 300,000 snapshots. Safari starts on Growth, and iOS Safari and Edge on Pro.
- Can an AI agent work with Happo diffs?
- Yes. Happo's MCP server lets clients such as Claude, ChatGPT and Cursor list comparisons for a commit, read the diffs, approve or reject them, and flag flaky ones. Happo's documentation describes the comparison as screenshots against a baseline; it does not describe checking new code against your design system.