Email Inbox Preview
Paste an HTML email and see how it lands in Gmail, Apple Mail, and a strict-mode Outlook approximation, side-by-side. Catches the obvious cross-client failures (flexbox-built layouts that collapse in Outlook, custom fonts that fall back, dark-mode contrast issues) before you send. Free, in-browser, no signup.
How to use
- Copy the full HTML source of your email - either from your ESP's "view source" or your design tool's HTML export.
- Paste into the textarea above. Previews update live (debounced 350 ms).
- Compare side-by-side. Watch for differences between the Outlook column and the others - that's where most cross-client breakage lives.
- If a layout collapses in Outlook only: rebuild with tables, not flexbox/grid. If a font falls back in Gmail mobile: provide a web-safe fallback in your
font-familystack.
What we strip in the Outlook approximation
The Outlook iframe wraps your HTML in a CSS reset that disables every property the Word rendering engine ignores. Specifically:
display: flexanddisplay: grid- reset toblock- All
transform,transition,animationproperties - All
@mediaqueries (flatten to no-query rules where possible) - All
@font-facedeclarations - replaced with system fallbacks ::beforeand::afterpseudo-elements- CSS custom properties (
var(--x)and--x:) <style>blocks within<body>(Outlook only honors<style>in<head>, with caveats)
And honors <!--[if mso]> conditional comments by including their content in the rendered output (Outlook does this; other clients ignore it).
FAQ
Is this the same as Litmus or Email on Acid?
No. Litmus and Email on Acid run actual virtual machines with real Outlook, real Gmail, real Apple Mail installed and capture screenshots. We approximate three clients in your browser using iframes plus client-specific CSS transformations. The Gmail and Apple Mail previews are quite close to reality (both are WebView-based and accept modern CSS). The Outlook preview is an approximation - it strips flexbox, grid, @media queries, @font-face, and other CSS that the Word rendering engine ignores - but it can't reproduce every Word-engine quirk. For pixel-perfect Outlook testing, use Litmus or Email on Acid. For free hygiene checking, this works.
Why can't you replicate Outlook desktop accurately?
Outlook desktop on Windows uses Microsoft Word's HTML rendering engine - a proprietary, closed-source engine bundled with Word. There's no open-source replication, and the engine itself only runs on Windows with a Word license. The closest a browser-based tool can get is to apply a CSS reset that disables every property the Word engine ignores - which catches the obvious failures (flexbox layouts, custom font loading) but doesn't reproduce subtler quirks (cell-spacing handling, inline-block computation, image scaling).
What does the Outlook approximation actually do?
It applies a CSS reset that disables flexbox (display:flex), grid (display:grid), all transforms, all transitions and animations, all CSS custom properties (var()), all @media queries, all @font-face declarations, all pseudo-elements (::before / ::after), and every property starting with -- (custom). It also strips the entire body of any <style> blocks and processes MSO conditional comments by including their content in the rendered output. The result: roughly what Outlook desktop on Windows would do with the email.
What about Gmail mobile vs Gmail web?
The Gmail preview here matches Gmail web, which is the more permissive of Gmail's renderers. Gmail Android and iOS are stricter - they don't support @font-face, render at narrower viewports, and can't use external <style> blocks. Mobile Gmail behaves much like Apple Mail iOS, which is approximated in the Apple Mail preview. So if you check both Gmail (web) and Apple Mail (iOS) here, you'll cover most of Gmail mobile's quirks too.
Why don't you preview Yahoo, AOL, Outlook web, or other clients?
Yahoo and AOL render very similarly to Gmail (modern WebView, strips @font-face, no @media). Outlook on the web is a modern WebView and renders much like Apple Mail or Gmail - very different from Outlook desktop. Adding more preview panels makes the side-by-side layout cramped without adding meaningful new information. The three we've chosen represent the three buckets of email rendering: modern with @font-face (Apple), modern without @font-face (Gmail), and Word-engine (Outlook desktop).
Does my HTML get sent anywhere?
No. Everything happens in your browser - no server call, no upload. The previews render via iframe srcdoc with the email source written into the iframe document directly. DevTools Network tab during preview shows zero outbound requests for your HTML.
What input format does the tool accept?
Full HTML email source - the same content you'd paste into your ESP's HTML view, or copy from a "View source" menu in your design tool. The tool handles a complete <html><body>...</body></html> document or a body fragment. <style>, <link rel="stylesheet">, and image tags all work as expected, with the caveat that external resources (images, hosted fonts) are loaded in iframes with no special permissions - some CDNs may refuse to serve to iframes, in which case images won't appear in the preview but will work fine in real email clients.
Can I save the preview as a screenshot?
Use your OS screenshot tool (Cmd+Shift+4 on macOS, Win+Shift+S on Windows). The previews are real iframes, not custom-rendered canvases, so any standard screenshot capture works. For automated screenshot collection across many clients, that's a Litmus / Email on Acid use case - they spin up real VMs and snapshot programmatically.
Build the email this preview is for
MiN8T's editor exports table-based, Outlook-safe HTML out of the box. Drop the HTML here to verify, but design where you don't have to fight Outlook in the first place.
Open MiN8T Editor →