Show Before/After

A before/after page is one self-contained HTML page that sets two states of something visual side by side and pins the reasoning to what the reader sees. Before is usually the current state; 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", "matplotlib, seed 0", "Screenshot, macOS"):

• Both states run as web pages: point each <iframe> at its own server.
• HTML, CSS, or SVG to recreate (web UI, diagram, email, rendered doc): put the real source in an <iframe srcdoc>, so the two stylesheets stay isolated.
• Rendered output (chart, model prediction, native or mobile UI): an image per side, produced by the real code at each revision.
• Text output (terminal, logs, copy): the real text in a monospace block per side.