UI Diff

A UI diff is one self-contained HTML page that sets two states of a UI side by side and pins the reasoning to the pixels. Before is usually the current UI; After is a plan, a finished branch, or an alternative.

Sources

Render each side from the most faithful source available, and label it under the pane title ("Current app.css", "localhost:5173 on main", "Screenshot, macOS"):

• Both states run: point each <iframe> at its own server.
• Web UI to recreate: put its real CSS and markup in an <iframe srcdoc>, so the two stylesheets stay isolated.
• Anything else (native, mobile, terminal): a screenshot per side.

Feed both sides the same content and data, so the change is the only difference.

Page