Catch UI regressions before they merge.

Website | Docs | npm

Your CI takes the screenshots. stateofpixel compares them with the last approved ones, shows every change on a review page, and sets a GitHub check that waits until someone approves them.

• Works with Playwright, Storybook or any folder of PNG files.
• No secret on GitHub Actions: the CLI signs in with the OIDC token.
• Only images the server does not have yet are uploaded, and images are diffed on your runner.
• The review page has side by side, diff, slider and flip, and every action has a key.
• Approvals carry over when you push again or rebase the pull request.
• Shards of one run join one build and report one check.
• Plans are priced by storage. There are no seats.

Quick start

Sign in on stateofpixel.com, connect GitHub and install the GitHub App, then add a step after the one that writes your screenshots:

on:
  push:
    branches: [main]
  pull_request:

permissions:
  contents: read
  id-token: write

jobs:
  visual:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v7
        with:
          fetch-depth: 0
      - run: npx playwright test
      - run: npx stateofpixel upload screenshots

The docs cover the Playwright reporter, Storybook, other CI, sharding, reviewing and the CLI.

Repository

Path	What it is
apps/web	The web app on Netlify, built with TanStack Start. It runs the backend in Netlify Functions, with Netlify Database, Netlify Blobs for images and Netlify Identity for sign-in
apps/web/src/content/docs	The docs at /docs, in MDX
apps/web/visual	Playwright tests that capture the web app for dogfooding
packages/backend	The server code the web app runs: the functions the browser calls, the CI API, GitHub and Dodo webhooks, background jobs and the Postgres schema
packages/cli	The stateofpixel CLI and Playwright reporter, published to npm
examples/playground	Static pages and Storybook stories that the test pull requests change
scripts	test-pr.sh opens the dogfooding test pull requests

• docs/DESIGN.md: the design system of the web app
• CONTRIBUTING.md: development, environment variables, checks and pull requests
• ROADMAP.md: planned improvements
• AGENTS.md: rules for coding agents working in this repo

License

MIT