HTML Email Preview

Render an HTML email at the width you choose, with its images blocked the way an inbox first shows it.

Runs on your deviceEmailWorkingNo account needed

What this tool does

HTML Email Preview takes the source of an email template — a full document or just the markup — and draws it inside a fixed-width frame. Before anything is displayed the HTML is passed through DOMPurify, and the <style> blocks are lifted out and rewritten so every selector is confined to the preview box, with @import rules deleted rather than fetched. That scoping is why an email carrying a body{margin:0} rule cannot reach out and restyle the page around it, and why the template can be drawn on this page at all rather than in a stripped-down box.

The same source is then run through fifteen mail-client checks. They measure the UTF-8 size against the 102 KB point where Gmail clips a message, count images without alt text and images pulled from the network, find the widest fixed width in the markup and flag anything over 700 px, and look for script blocks, form elements, external stylesheets and @import rules, media queries, plain http:// links, a doctype, a title element, a hidden preheader, a viewport meta tag and an unsubscribe link. One further check gathers the CSS that breaks in Outlook: flexbox and grid, absolute or fixed positioning, background images that need a VML fallback, embedded video, audio, SVG or iframes, and rem, vw or vh units in spacing.

What reaches the screen is thinner than that list suggests, and it is the first thing to know about this page. The output area holds one result and the rendered preview claims it, so the checks arrive as a single line beneath the frame — 600 px preview · 15 checks, 2 warnings — a tally of how many warned with nothing about which. Every check does carry a tick, a warning or an information mark and a sentence of detail, but that table is worked out and then dropped instead of drawn, so a raised count sends you back to your own source to find the cause. The extracted plain-text version is in the same position: it is what the Copy output button puts on the clipboard, not something displayed next to the preview.

The other limit is the rendering engine. This is your own browser drawing the markup, not Outlook's Word-based renderer and not Gmail stripping the head before it displays anything, so the preview shows what your HTML means rather than what each client will make of it. The width selector has the same edge: it sets the frame's max-width, and the media queries in your stylesheet are preserved but still measure the browser window, so choosing 375 px narrows the container without switching a @media (max-width: 480px) block on. To exercise a responsive email properly, narrow the browser window itself. The checks read the source with pattern matching rather than parsing the result, so a script tag inside a comment is still counted, and the word unsubscribe anywhere in the body satisfies that check.

Nothing is uploaded. The parsing, the sanitising and the rendering all happen inside this browser tab, which matters because a template in progress usually carries tracking URLs, campaign identifiers and an unreleased offer. The sanitiser removes script, iframe, object, embed, form, input, button, select, textarea, video, audio, svg, link, meta and base tags outright, drops javascript: hrefs, and gives every surviving link target="_blank" with rel="noopener noreferrer", so opening a stranger's template here does not run their code or navigate this page away.

How to use it

  1. Paste the HTML. Drop in the whole document or only the markup you are working on, or press Load sample to put a working template in the box. Nothing is drawn until you press Run. Anything outside <body> is discarded except the <style> blocks, which are kept and scoped.
  2. Choose a preview width. 320, 375, 414, 600 or 768 px, or full width. The caption above the frame repeats the width and says how many remote images were found, and whether they were blocked or loaded.
  3. Decide what happens to images. Blocked is the default, because that is roughly how Outlook and Apple Mail open a message. Every image loses its src, including base64 data: images and cid: references that a real client would happily show, and each placeholder carries the alt text with (blocked) appended — an image with no alt reads image (blocked), so a missing attribute looks much like a present one here. Switch to Load remote images to fetch them from the network.
  4. Tick the dark surround if you need it. It paints the area around the frame dark so a light template can be judged against a dark inbox. It changes the surround only — it does not reproduce the colour inversion that iOS Mail or Outlook apply.
  5. Read the summary line, then copy the text. Under the output the summary gives the width, the number of checks and how many of them warned. Copy output puts the plain-text extraction on the clipboard, with each link's URL in round brackets after its text and image alt text in square ones, which is roughly what a text-only client will show.

Processing & privacy

Runs on your device. Your file is processed directly in this browser.

Common use cases

Reviewing a template before a campaign goes out

One pass catches the things that are expensive after send: a missing alt attribute, a container built at 800 px, a stylesheet still loaded with a <link> tag that Gmail will ignore. The count says how many of those fired, and the frame shows what the damage looks like.

Working out why a design collapses in Outlook

The warning tally rises when the source uses flexbox, grid, absolute positioning or a CSS background image — the constructs that hold up in a browser and fall apart in Word's renderer. You get the signal that one of them is present, and finding which is a search through your own stylesheet.

Checking what a recipient sees with images off

Most people meet an email before its images load. The blocked view shows whether the message still reads, or whether the offer was only ever inside a JPEG.

Inheriting a template you did not write

Render html mail from an agency or an old campaign at 375 px and at 600 px, copy the plain-text extraction out, and you have the structure without opening it in a mail client.

Sanity-checking size before a long newsletter

The size check compares the HTML against Gmail's 102 KB clipping point, and going over it adds a warning — the difference between a full issue and one that ends in a View entire message link.

Questions

Is my HTML uploaded anywhere?
No. The template is sanitised and rendered inside this browser tab, and the checks run over the text in memory. Nothing is transmitted, and the sanitiser is served from this site rather than a third-party CDN, so the tool keeps working once the page has loaded it, even with the network off.
Where do I see the fifteen checks?
You do not, and it is the weakest part of this page today. The output area shows a single result and the preview takes it, so the checks are reduced to the summary line: how many ran and how many warned. Each row and its explanation is produced and then discarded rather than rendered, which means a count of two warnings tells you to go looking without saying where.
Does this show exactly what Gmail or Outlook will do?
No, and no browser-based preview can. Outlook on Windows renders mail with Word's engine, and Gmail removes the head and filters CSS before display. This shows how the markup itself behaves, and counts the constructs those clients are known to drop. Testing against the real clients is a separate job.
Why does my mobile layout not appear at the 375 px setting?
The width control sets the frame's max-width. Your media queries are preserved and scoped to the preview, but they are still evaluated against the browser window, so a max-width: 480px block does not fire while the window is wide. Narrow the window, or use your browser's device emulation, to trigger them.
What happens to scripts, forms and iframes in my template?
They are removed before rendering, along with object, embed, video, audio, svg, link, meta and base tags, and javascript: links are dropped. The checks notice some of that — scripts, form fields, external stylesheets, and the video, audio, svg and iframe group — but object and embed are stripped with no check of their own, so nothing counts them. Your source is left untouched either way.
Can I open an .eml file here?
No, this expects HTML source. Use EML Viewer for a saved message. Images referenced with cid: also cannot resolve here, because there is no MIME message to take the parts from, so they stay as blocked placeholders whichever image setting you choose.
How much should I trust the warning count?
As a prompt to look, not as a verdict. The checks are pattern matches over the source rather than a parse of the rendered result, so a script tag inside a comment still registers, the unsubscribe check is satisfied by the word appearing anywhere in the body, and a width set only in an external stylesheet is never measured.
Does it change my HTML?
No. The preview is built from a sanitised copy and the source box keeps exactly what you pasted. Copy output hands you the plain-text extraction rather than a cleaned-up template, so there is no corrected HTML to paste back — decide what to fix here, then make the change in your own editor.

Related tools