# Mirrorframe

> Mirrorframe captures webpages with Playwright and reconstructs their observed layout and behavior as a self-contained React app. It records computed styles, assets, motion and selected interaction states, then compares rendered nodes and replayed states against the original with image diffs.

- Type: Tool
- Targets: Website
- Category: Website analysis tools
- Relationship: Foundation tool
- Sources reviewed: 2026-11-06
- Added to the catalog: 2026-11-06
- Original resource: <https://github.com/byte271/mirrorframe>
- Primary source: <https://github.com/byte271/mirrorframe/blob/16ffce02957bbc7f28f5ea1b38e40bea3ff4fd37/README.md>
- Catalog page: <https://awesomerea.org/resources/mirrorframe/>
- Record JSON: <https://awesomerea.org/resources/mirrorframe/record.json>
- Chinese version: [简体中文](https://awesomerea.org/zh/resources/mirrorframe/index.md)

## Requirements & limits

- **Prerequisites:** Node.js 18 or later and Playwright Chromium are required.
- **Limits:** The 0.x CLI, genome schema and report format may change.
- **Limits:** Live Canvas, WebGL and WebGPU drawing programs are not reconstructed; Canvas output is a captured still.
- **License:** MIT License.

## Primary sources

1. <https://github.com/byte271/mirrorframe/blob/16ffce02957bbc7f28f5ea1b38e40bea3ff4fd37/README.md>
2. <https://github.com/byte271/mirrorframe/blob/16ffce02957bbc7f28f5ea1b38e40bea3ff4fd37/references/limitations.md>

## More in Websites

- [Dinosaur runner: recovering one acceleration rule](https://awesomerea.org/resources/rea-dinosaur-speed-case/index.md) · Case study
- [rauchg.com: rebuilding an RSC blog from captured Flight output](https://awesomerea.org/resources/rauchg-rsc-reconstruction-case/index.md) · Case study
- [BaoCut Slides: adapting an interactive web editor](https://awesomerea.org/resources/baocut-slides-editor-case/index.md) · Case study
- [REA in Claude Code: an isolated static-analysis A/B trial](https://awesomerea.org/resources/rea-claude-code-isolated-ab-case/index.md) · Case study
- [Dinosaur runner: an REA-inspected speed rule rebuilt with Codex](https://awesomerea.org/resources/rea-dino-runner-community-case/index.md) · Case study
- [Terminal: a Rust terminal informed by TradingView chart research](https://awesomerea.org/resources/terminal-tradingview-rea-chart-case/index.md) · Case study

## About this entry

The description was reviewed against primary sources.
Original editorial content: MIT. Linked projects, papers and assets retain their own rights and licenses.