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.
Feed both sides the same input, data, and seed, so the change is the only difference.
Page
- Title, then one or two sentences: what changes and what stays fixed.
- One row of controls, only those this comparison needs: annotations toggle, layout (Side by side / Stacked), viewport, scroll together for long frames, and input variants that exercise the change.
- Two panes: "Before · " and "After · ".
- Numbered notes under each pane. Before notes name the problems; After notes name the fixes. Each note is a bold claim plus one sentence of why, with concrete numbers (px, counts, prices, metrics) where they exist.
- A numbered pin on the frame at the element or region each note describes. Hovering a note highlights its pin, and hovering a pin highlights its note.
Output
Write the page to $TMPDIR/<topic>/before-after.html, open its file:// URL in a
background browser window, and reply with the absolute path. srcdoc iframes, iframes
pointed at running servers, and images beside the page all load from file://, so skip
the server. Serve the directory with python3 -m http.server only when the page needs
what browsers block on file://: fetch, ES module scripts, or local font files.
The page is done when every note has a pin on what it describes and each side matches its labelled source.