\n\n\n \n \n\n\n**Your coding agent cannot see the page it just built. pixelpact measures it against the\nreference and hands back numbers.**\n\n[](https://github.com/jamalkamaladdin/pixelpact/actions/workflows/ci.yml)\n[](https://www.npmjs.com/package/pixelpact)\n[](https://nodejs.org)\n[](./LICENSE)\n\n
\n\nA coding agent writes the CSS and says it is done. It never sees the result. Nothing hands it a\nnumber, so the loop cannot close: the agent guesses, you open the page, you send it back, it\nguesses again. Every round costs you the one thing the agent was supposed to save.\n\nThe same gap exists without an agent, when a teammate says a section is finished and nobody in\nthe room has a measurement. The difference is that a person can at least look.\n\npixelpact reads the reference page and writes down what it actually renders: sizes, colors,\nspacing, typography, hover and focus states, animation keyframes, design tokens. That file is\nthe **contract**. Point pixelpact at the implementation and it answers with one line per\nproperty that drifted, which is precisely what an agent can act on.\n\n```bash\nnpx pixelpact extract https://reference.example.com -o contract.json\nnpx pixelpact check contract.json http://localhost:3000\n```\n\n## Works with\n\n
\n\n| **MCP clients** | **Playwright** | **GitHub Actions** | **Any framework** | **Figma** |\n| :-------------: | :------------: | :----------------: | :---------------: | :-------: |\n| Claude Code, Cursor, anything that speaks stdio MCP | the engine it drives | one comment on the pull request | it reads the DOM, not your stack | a frame as the reference, when you want one |\n\n*If a browser can render it, pixelpact can measure it.*\n\n
\n\n## For coding agents\n\nAn agent that writes UI code cannot tell whether it succeeded. `pixelpact-mcp` gives it the\nmeasurement, so the loop closes without a person in the middle: extract the contract once,\nthen let the agent check its own work, read the deviation list, fix, and check again.\n\n```jsonc\n// .mcp.json\n{\n \"mcpServers\": {\n \"pixelpact\": { \"command\": \"npx\", \"args\": [\"-y\", \"pixelpact-mcp\"] }\n }\n}\n```\n\nTools exposed: `extract_contract`, `check_implementation`, `diff_pixels`,\n`read_contract_summary`.\n\n## Why this is not visual regression testing\n\nPercy, Chromatic, Applitools, BackstopJS and Pixeleye all compare your page against a baseline\nthat you approved earlier. That model works once the page already looks right and you want to\nkeep it that way. While you are still building toward a design, there is no baseline to\ncompare with, and the first run of a regression tool simply records whatever you produced.\n\n| | Visual regression tools | pixelpact |\n| ---------------------------- | ---------------------------------- | ---------------------------------- |\n| Compares against | a snapshot you approved earlier | the reference design itself |\n| Useful when | the UI is already correct | the UI is being built |\n| First run on a new page | records, cannot judge | measures against the reference |\n| Answer you get | an image diff to inspect by eye | a value per property, with a delta |\n| Fits an autonomous agent | needs a human to approve the diff | the numbers close the loop |\n\nThe two models are complementary. Use a regression tool to keep a finished page finished, and\npixelpact to get it finished in the first place.\n\n## Problems pixelpact solves\n\n| Without pixelpact | With pixelpact |\n| ----------------- | -------------- |\n| ❌ A coding agent writes CSS, declares it done, and a person has to open the page to find out that it is not. | ✅ The agent calls the MCP server, reads the deviations, fixes them and checks again. No person in the middle. |\n| ❌ Someone says the section is finished, you disagree, and neither of you has a number. The louder opinion wins. | ✅ Every value in the reference is asserted against your page. What failed is listed with expected, actual and the difference. |\n| ❌ A regression tool has nothing to compare a brand new page against, so its first run records whatever you happened to build. | ✅ The reference is the baseline from the first minute. Nothing has to be approved before the tool is useful. |\n| ❌ Hover, focus and animation values are almost never reviewed, because checking them by hand is slow and boring. | ✅ They are part of the contract, so they are measured on every run like any other value. |\n| ❌ An image diff tells you that something changed and leaves you to hunt for what. | ✅ Deviations name the element, the property, the expected value and the measured one. |\n| ❌ The design lives in a file nobody opens during code review. | ✅ The contract is committed JSON, so a pull request shows exactly which values moved. |\n\n## Install\n\n```bash\npnpm add -D pixelpact playwright\npnpm exec playwright install chromium\n```\n\n`playwright` is a peer dependency, so the browser download stays under your control and a\nproject that already has Playwright installs nothing extra. Node 22.12 or newer is required.\n\n## Quickstart\n\n**1. Extract the contract from the reference.**\n\n```bash\nnpx pixelpact extract https://reference.example.com \\\n --selector \"main\" \\\n --viewport desktop,mobile \\\n --screenshots .pixelpact/shots \\\n -o contract.json\n```\n\n**2. Measure your implementation.**\n\n```bash\nnpx pixelpact check contract.json http://localhost:3000 --viewport desktop\n```\n\n**3. Fix what it reports, then run it again.** The command exits `0` when everything is inside\ntolerance and `1` when it is not, so it drops straight into a script or a CI job.\n\n## What a contract looks like\n\nA contract is plain JSON, readable and diffable, with no proprietary format and no service\nbehind it.\n\n```jsonc\n{\n \"version\": 1,\n \"source\": { \"type\": \"url\", \"value\": \"https://reference.example.com\" },\n \"root\": \"main\",\n \"extractedAt\": \"2026-09-06T01:20:44.812Z\",\n \"viewports\": [{ \"name\": \"desktop\", \"width\": 1440, \"height\": 900 }],\n \"tokens\": { \"--brand-600\": \"rgb(11, 114, 133)\" },\n \"keyframes\": { \"fade-up\": [{ \"offset\": \"0%\", \"css\": \"opacity: 0\" }] },\n \"byViewport\": {\n \"desktop\": {\n \"documentHeight\": 4218,\n \"elements\": [\n {\n \"selector\": \"main > header > a.cta\",\n \"tag\": \"a\",\n \"text\": \"Get started\",\n \"box\": { \"x\": 120, \"y\": 32, \"w\": 148, \"h\": 44 },\n \"styles\": {\n \"background-color\": \"rgb(11, 114, 133)\",\n \"font-size\": \"16px\",\n \"border-radius\": \"8px\"\n },\n \"hover\": { \"background-color\": \"rgb(8, 90, 105)\" },\n \"focus\": { \"outline\": \"2px solid rgb(11, 114, 133)\" }\n }\n ]\n }\n }\n}\n```\n\nBecause it is a file, you can commit it, review it in a pull request, hand it to another\ndeveloper, or hand it to an agent.\n\n## What a check prints\n\n\n\n```text\npixelpact check FAILED\n target http://localhost:4173/impl.html\n reference http://localhost:4173/ref.html\n viewport desktop 1440x900\n elements 14 matched, 0 missing of 14\n checks 1056 passed, 10 failed (99.1% of 1066)\n\ndeviations (10)\nSELECTOR PROPERTY EXPECTED ACTUAL DIFF\nbody > main > h1 font-size 48px 44px 4px\nbody > main > a box.width 117.75px 109.75px 8px\nbody > main > a padding-right 24px 20px 4px\nbody > main > a padding-left 24px 20px 4px\nbody > main > a background-color rgb(11, 114, 133) rgb(37, 99, 235) 60.1 (color)\nbody > main > a border-top-left-radius 8px 4px 4px\nbody > main > a border-top-right-radius 8px 4px 4px\nbody > main > a border-bottom-left-ra... 8px 4px 4px\nbody > main > a border-bottom-right-r... 8px 4px 4px\nbody > main > a focus.outline rgb(11, 114, 133) s... rgb(37, 99, 235) so... differs\n```\n\n\n\nThat is a real run against two copies of one page with four declarations changed. Four edits\nproduce ten measured deviations, because padding moves the box width and one `border-radius`\nshorthand sets four corners. Run the same check against the reference itself and all 1066\nassertions pass, which is the property that matters: a passing check has to mean something.\n\nAdd `--json` to get the same report as a data structure, which is what CI jobs and agents read.\n\n## What a side by side run shows\n\n`check` says which values moved. `diff` says how many pixels moved. Neither tells a person\nwhere to look. `side` splits both pages into sections, puts them next to each other, and boxes\nwhat differs.\n\n```bash\nnpx pixelpact side https://reference.example.com http://localhost:3000 --widths 1440,390\n```\n\n```text\n# SECTION WIDTH VERDICT DIFF\n01 hero 1440px PASS 0.000%\n02 features 1440px FAIL 0.675%\n .pixelpact/side/1440/02-features.png\n03 pricing 1440px PASS 0.000%\n04 foot 1440px FAIL 1.265%\n .pixelpact/side/1440/04-foot.png\n```\n\n\n\nThat is a real run against the two files in [`examples/side`](./examples/side), which are\ncopies of one page where the card gap and the corner radius were changed. Reproduce it with:\n\n```bash\nnpx pixelpact side \"file://$PWD/examples/side/reference.html\" \\\n \"file://$PWD/examples/side/implementation.html\" --widths 1440\n```\n\nThis is the command to run before telling anyone that a page is finished.\n\n## Features\n\n
\n
\n
Contract from the reference
Reads the page you are building toward and writes down every value it renders. Nothing to approve first.
\n
Numbers, not opinions
Each deviation carries the expected value, the measured value and the difference between them.
\n
States, not just layout
Interactive elements are hovered and focused, and only the properties that actually change are stored.
\n
\n
\n
Tokens and keyframes
Custom properties on the root element and named animation keyframes travel inside the contract.
\n
Pixel comparison
When every value passes and it still looks wrong, compare the screenshots and get a percentage.
\n
Agent ready
An MCP server exposes the same measurements, so a coding agent can close its own loop.
\n
\n
\n
Pull request checks
A composite Action runs the check and keeps one comment on the pull request up to date.
\n
Plain JSON
The contract is a file you can read, diff and review. No service, no account, nothing to log into.
\n
Framework agnostic
It measures the rendered DOM, so React, Vue, Svelte and hand written HTML are all the same to it.
![\"pixelpact\"](\"assets/logo-dark.svg\"){kind=logo}
\n