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:

Gmail strips <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 Mail uses 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

Open Email Viewer.
Paste your HTML email template into the code editor, or click Open File to load a .html file.
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.
Toggle between desktop and mobile breakpoints to check both layouts.
Enable the dark mode toggle to see how your colors and images look in a dark-themed inbox.
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 requires mso-padding-alt and 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

Add max-width: 100%; height: auto; as an inline style on every <img> 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 your font-family stack: Arial, sans-serif or Georgia, serif.

Dark mode changing your background color

Apple Mail and some other clients invert backgrounds in dark mode. Use color-scheme: light only on 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 adding display: 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, click Compile, 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:

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

FAQ

How do I test an HTML email template online?

Open Email Viewer, paste your HTML email template into the code editor, and switch between the Gmail, Outlook, and Apple Mail preview tabs. Each tab simulates how that client renders your template.

Why does my HTML email look different in Outlook?

Outlook on Windows uses Microsoft Word as its rendering engine, which ignores most CSS. Use table-based layout, inline CSS, and avoid flexbox or CSS grid in emails you want Outlook to render correctly.

Does Gmail support CSS in HTML email?

Gmail strips external stylesheets and most <style> block rules. Inline all CSS on individual elements — style="color: red; font-size: 14px;" — so Gmail preserves your styles.

How do I test dark mode in my email template?

In Email Viewer, toggle the dark mode switch in the preview toolbar. The Apple Mail view shows how your colors and images appear in a dark-themed inbox.

Can I test MJML templates in Email Viewer?

Yes. Paste your MJML into the editor and click Compile. Email Viewer compiles the MJML to HTML and shows the result in the client preview tabs.

Is it safe to paste private email templates into an online tool?

Email Viewer processes everything in your browser. No HTML or data you enter is sent to any server. Your template stays on your device.

For more on email testing, see email QA checklist and how to test email dark mode.

How to Test HTML Email Templates Free