react-render-audit

---

Playwright helpers that measure what a React page does: commits per component and why, idle activity, backend-call counts, layout breaks, and a pixel diff of two screenshot folders. Package @rethunk/react-render-audit. First consumer: Mortar.

It reads React's DevTools hook, so it counts commits by component without a dev build, and its layout checks need no baseline to see a bug. Selectors for a UI library are options; muiPreset holds the values that fit MUI.

await page.addInitScript({ content: hookScript(muiPreset) })

Quick start

bun add @rethunk/react-render-audit

A worked example and the contracts: HUMANS.md.

Features

• hookScript and Meter report commits per component and why, mutations, long tasks and backend calls.
• layoutBreaks finds a control squeezed to nothing, text covered by another element and a page wider than its window.
• unevenSpacing and nestedBoxes find uneven gaps and a box inside a same-looking box.
• diffShots and the render-diff command compare two screenshot folders pixel by pixel.
• webkitWalk repeats the layout checks in WebKitGTK through WebKitWebDriver.

Documentation

Doc	Audience
HUMANS.md	Running and using the package
AGENTS.md	Internals, invariants, and why
CONTRIBUTING.md	Process — commits, tests, docs
SECURITY.md	Vulnerability disclosure
CHANGELOG.md	Release notes

License

MIT — see LICENSE. © 2026 Rethunk.Tech, LLC.