HTML output viewer
A tabbed inspector for the underlying email output — the raw HTML, the CSS-inlined Outlook-safe version, and the plain-text fallback. Each tab is rendered through the existing CodeBlock primitive so copy and line numbers come along for free.
Production answer
HTML output viewer is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Primary CTAReview HTML output viewer states
Generative search brief
HTML output viewer: A tabbed inspector for the underlying email output — the raw HTML, the CSS-inlined Outlook-safe version, and the plain-text fallback. Each tab is rendered through the existing CodeBlock primitive so copy and line numbers come along for free.
Live source
HTMLwinter-newsletter.html
<!doctype html><html lang="en"> <head> <meta charset="utf-8" /> <title>Winter workshop newsletter</title> <style> body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif; background: #f4f2ee; color: #1f2230; } .container { max-width: 600px; margin: 0 auto; padding: 24px; background: #ffffff; } h1 { font-family: Anton, "Arial Narrow", Impact, sans-serif; font-size: 32px; margin: 0 0 12px; } .cta { display: inline-block; padding: 12px 22px; background: #e62028; color: #fff; text-decoration: none; border-radius: 6px; } .footer { font-size: 12px; color: #6b7080; text-align: center; padding-top: 24px; } </style> </head> <body> <div class="container"> <img src="/winter-hero.webp" alt="Winter workshop at sunrise" width="552" /> <h1>Winter at the workshop</h1> <p>Hi {{first_name}} — here's what's new in Oak Flats this month.</p> <p>Your last quote, {{quote.total}}, is still on the bench in {{workshop.bay}}.</p> <p><a class="cta" href="https://mufflermen.com.au/book">Book your service</a></p> <p class="footer">Unit 4 / 12 Cygnet Place, Oak Flats NSW 2529 · ABN 12 345 678 901</p> </div> </body></html>