HTML email preview

Paste the HTML of an email and see it at desktop and phone widths, with images switched off and on a dark background.

A width preview, not a test in real Gmail or Outlook. Runs in your browser; nothing is uploaded.

Send this email for commentsYour team or client comments on the email itself, pinned to the line or button they mean. No account.

How to use the html email preview

  1. Copy the email codeIn Mailchimp, Klaviyo, HubSpot or your email tool, export or copy the email's HTML.
  2. Paste and previewCheck it at desktop and phone width, with images off and on a dark background.
  3. Send for commentsShare it with your team or client to comment on before it goes out.

What it checks

Phone widthMost emails are opened on phones. Check text size and that buttons are easy to tap.
Images offSome inboxes block images until the reader allows them. Alt text should still make sense.
Dark surroundingsHow the email sits in a dark inbox, before any colours are changed by the app.
Subject and preview textThe title and hidden preview text written into the code, as an inbox shows them.

What this preview shows, and what it doesn't

This tool draws your email's HTML at the widths inboxes use: about 640 pixels on a desktop and 375 on a phone. It is the quickest way to spot a layout that breaks on a small screen, a button that is too small, or an email that falls apart when images are blocked.

It isn't a test in real email apps. Gmail, Outlook and Apple Mail each change HTML in their own ways, and Outlook on Windows is famously strict. For pixel-perfect testing in dozens of real inboxes, paid services such as Litmus and Email on Acid exist. Use this preview first, then send a test to the inboxes your readers use most.

A quick checklist for any email

  • Subject and preview text. Together they decide whether the email gets opened. Keep the subject short and use the preview text to add a reason to open.
  • Phone first. Body text of at least 14 to 16 pixels, one column, and buttons at least 44 pixels tall.
  • Images off. Every image needs alt text, and the main message and button should work without images.
  • One clear action. One main button, near the top, saying exactly what happens.
  • Links. Click every link in a test send, including the unsubscribe link.

Getting sign-off before you hit send

Emails go to thousands of people at once, so a typo or a wrong price can't be fixed after the fact. Instead of forwarding screenshots around, send the email as a review link: your team or client clicks the line, image or button they mean and comments there. Paste the code into HTMLAnnotate and everyone reviews the same version.

Related guides

Questions

Is the email preview free?

Yes. It runs in your browser with no signup and no limits.

Does it show how my email looks in Gmail or Outlook?

No. It shows the email at desktop and phone widths in a normal browser. Real email apps change HTML in their own ways, so send a test to the inboxes your readers use most before a big send.

Where do I find my email's HTML?

Most email tools can export or show the HTML. In Mailchimp, Klaviyo and HubSpot it is usually under an export, code view or Send test option.

What does Images off do?

It replaces each image with its alt text, like an inbox that blocks images until the reader allows them.

Is my email uploaded anywhere?

No. The preview is drawn in your browser. It is only shared if you press Get a review link.

Can my client comment on the email?

Yes. Press Get a review link and send it. They click the part of the email they mean and type their comment, with no account.

More free tools