Email HTML Preview

How to use the email html preview

1. Paste the email's HTML.
2. Switch between desktop and phone widths, and turn images off.
3. Read the findings, then send a test to a real address anyway.

About this tool

Paste email HTML and this renders it at desktop and phone widths, with a switch to see it as most clients open it: images blocked. That second view is the important one, because a message from an unknown sender is first seen without its images, and a design carried entirely by pictures arrives as a column of empty boxes.

The checks name a client behaviour rather than a general rule. Flexbox and grid are flagged because Outlook on Windows renders with Word's layout engine and supports neither. External stylesheets are flagged because no client loads one. Anything over about 102 kilobytes is flagged because Gmail clips the message behind a "View entire message" link — and the clipped part is usually where the unsubscribe link lives, which is a legal problem as well as a usability one.

The preview renders in a sandboxed frame with scripts disabled and no access to this page. Pasted email HTML is untrusted by definition — it is markup somebody else wrote — and rendering it directly in the page would let it read whatever else is in the tab.

The honest limitation is the one no web page can avoid: this is your browser's rendering, not Outlook's. Nothing in a browser can reproduce Word's layout engine, so the checks describe what other clients will do rather than showing it. A test send to a real address remains the only way to be sure.

Common uses

• Checking a template before sending it to a list.
• Seeing what a campaign looks like with images blocked.
• Finding the markup that will collapse in Outlook.

Frequently asked questions

Why does my email break in Outlook?

Outlook on Windows renders with Microsoft Word's layout engine. It ignores flexbox, grid, background images and much modern CSS, so layouts built on those collapse.

What is Gmail clipping?

Gmail hides anything past about 102 KB behind a "View entire message" link. The clipped part is often where the unsubscribe link sits, which makes it a compliance problem too.

Is this the same as Outlook's rendering?

No, and nothing in a browser can be. This is your own browser rendering the markup; the checks describe what other clients do. A test send is still needed.