Tools Viewer

How to Test HTML Email Templates Free

Published on July 29, 2026 by Tools Viewer

How to Test HTML Email Templates Free
How to Test HTML Email Templates Free

HTML email does not behave like a web page. Gmail, Outlook, and Apple Mail each parse HTML and CSS differently, so a template that looks perfect in one client can break in another. Testing before you send catches those problems early — before they reach your subscribers.

Email Viewer lets you test HTML email templates in simulated Gmail, Outlook, and Apple Mail views, right in your browser. Nothing leaves your device.

Why HTML email rendering varies by client

Web browsers follow modern CSS standards. Email clients do not. Each one has its own rendering engine with its own quirks:

  • Gmailstrips<head>styles and requires inline CSS on every element. It also removes many CSS properties entirely.
  • Outlook (Windows)uses Microsoft Word as its rendering engine, which has no real CSS support. Flexbox, grid, and most modern layout techniques do not work. Outlook uses table-based layouts.
  • Apple Mailuses a WebKit-based engine and has the best CSS support of the three, but dark mode behavior can change your colors unexpectedly.

The safest HTML email still uses tables for layout, inline CSS, and no external stylesheets.

How to test an HTML email template online

  1. OpenEmail Viewer.
  2. Paste your HTML email template into the code editor, or clickOpen Fileto load a.htmlfile.
  3. The preview renders your template on the right. Switch between client views — Gmail, Outlook, Apple Mail — using the tabs at the top of the preview.
  4. Toggle between desktop and mobile breakpoints to check both layouts.
  5. Enable the dark mode toggle to see how your colors and images look in a dark-themed inbox.
  6. Fix issues in the editor and watch the preview update in real time.

What to check in each client view

Different clients cause different problems. Focus your review on these areas:

Gmail

  • Do all styles appear? Gmail strips external CSS and<style>block rules that are not inlined.
  • Are images blocked? Many Gmail users see images blocked on first open. Your layout should still make sense without images.
  • Does the preview text (pre-header) show correctly in the inbox snippet?

Outlook

  • Is your layout table-based? Div-based layouts often collapse in Outlook because Word ignores floats and flexbox.
  • Do your buttons look right? Outlook requiresmso-padding-altand VML fallbacks for reliable button rendering.
  • Are there unwanted gaps between table cells?

Apple Mail

  • Does dark mode invert your background colors or turn your white text invisible?
  • Are SVG and retina images loading at the right size and resolution?

Common HTML email bugs and how to fix them

Images not scaling on mobile

Addmax-width: 100%; height: auto;as an inline style on every<p><em>[Image: Image]</em></p>tag. This makes images shrink on small screens without stretching on desktop.

Fonts falling back to serif on Outlook

Outlook ignores web fonts. Always specify a safe fallback in yourfont-familystack:Arial, sans-seriforGeorgia, serif.

Dark mode changing your background color

Apple Mail and some other clients invert backgrounds in dark mode. Usecolor-scheme: light onlyon your<html>tag to opt out of automatic inversion, or test dark mode explicitly and add CSS overrides.

Extra space below images in Outlook

Outlook adds space below inline images because it treats them as text. Fix it by addingdisplay: block;as an inline style on every image.

Testing MJML templates

MJML is a framework that generates table-based HTML email from a readable component syntax. If you write MJML, you need to compile it to HTML before testing the final output.

Email Viewer includes an MJML compiler. Paste your MJML template, clickCompile, and the output switches to the generated HTML automatically. You then test the compiled result across all client views.

Testing with merge tags and dynamic content

Most email templates use merge tags like{{first_name}}that get replaced with real values at send time. To test how the template looks with real data:

  1. OpenEmail Viewer and paste your template.
  2. Use themerge tag payload panel to enter sample values for each variable.
  3. The preview replaces the tags with your sample values so you can check line breaks, long names, and edge cases.

For more on email testing, seeemail QA checklist andhow to test email dark mode.