GGmail

Search mail

MyApp

Welcome to MyApp

Settings

Device

Email Client

Mode

Template

Sender

Subject16/50 chars

Preheader59/100 chars

Email HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Welcome to MyApp</title>
</head>
<body style="margin:0;padding:20px;background-color:#f4f4f4;font-family:Arial,sans-serif;">
  <table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="background-color:#f4f4f4;">
    <tr>
      <td align="center" style="padding:40px 0;">
        <table role="presentation" width="600" cellspacing="0" cellpadding="0" style="background-color:#ffffff;border-radius:8px;">
          <tr>
            <td style="padding:30px 40px;background-color:#7c3aed;border-radius:8px 8px 0 0;">
              <h1 style="color:#ffffff;margin:0;font-size:24px;">Welcome to MyApp</h1>
            </td>
          </tr>
          <tr>
            <td style="padding:30px 40px;">
              <p style="color:#333333;font-size:16px;line-height:1.6;margin:0 0 20px;">
                Thanks for signing up! We're excited to have you on board.
              </p>
              <table role="presentation" cellspacing="0" cellpadding="0">
                <tr>
                  <td style="background-color:#7c3aed;border-radius:6px;padding:12px 24px;">
                    <a href="https://example.com/get-started" style="color:#ffffff;text-decoration:none;font-weight:bold;font-size:16px;">
                      Get Started
                    </a>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td style="padding:20px 40px;border-top:1px solid #eeeeee;">
              <p style="color:#999999;font-size:12px;margin:0;">
                You received this email because you signed up at myapp.com
              </p>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

Email HTML Preview

HTML

Preview HTML emails across 6 clients — Gmail, Outlook, Apple Mail, Yahoo, Outlook.com, and Samsung. Dark mode, inbox preview, link checker, image validation, and compatibility scoring.

Why HTML email testing is essential

HTML emails render differently across email clients because each client has its own CSS engine and restrictions. Gmail strips external stylesheets and many CSS properties, Outlook for Windows uses the Word rendering engine (which does not support modern CSS), and Apple Mail supports most CSS but has its own quirks. This tool simulates how 6 major email clients actually render your HTML by stripping unsupported CSS properties per client, so you can see real rendering differences before sending. Toggle between desktop, tablet, and mobile views to test responsive layouts across devices.

Dark mode testing and inbox preview

Over 80% of email users have dark mode enabled on at least one device. Our dark mode toggle simulates how your email looks when clients apply dark backgrounds and light text. The Inbox Preview tab shows exactly how your email appears in each client's inbox list — with sender name, subject line, and preheader text — so you can optimize open rates before sending. Subject lines under 50 characters and preheaders under 100 characters perform best across clients.

Comprehensive email validation

The Validation tab scores your email from 0 to 100 across five categories: CSS compatibility (25+ rules including flexbox, grid, CSS variables, animations, and Outlook-specific issues), link validation (catches empty hrefs, placeholder links, and javascript: URLs), image checks (missing alt text, missing width and height attributes), accessibility (lang attribute, table roles, title tags), and document structure (DOCTYPE, charset, viewport meta). Fix issues before they reach your subscribers.

Best practices for email HTML

Use tables for layout instead of divs with flexbox or grid. Inline all CSS styles directly on elements. Set explicit widths on table cells. Use web-safe fonts with fallbacks. Keep total email width under 600px for optimal display across devices. Add role="presentation" to layout tables for screen reader compatibility. Always include alt text on images since many clients block images by default. Test with dark mode enabled since most email clients now default to dark mode.

Frequently Asked Questions

Which email clients does this tool preview?

This tool previews your email in 6 major clients: Gmail, Outlook (Desktop), Apple Mail, Yahoo Mail, Outlook.com, and Samsung Mail. Each client applies its own rendering rules — for example, Outlook strips border-radius and box-shadow, while Gmail removes style blocks and media queries. You can see exactly how your email changes per client.

Does the dark mode preview show real rendering?

The dark mode toggle simulates how email clients apply dark mode by adjusting background colors, text colors, and image brightness. While actual client implementations vary slightly, this gives you a reliable preview of how your email will look in dark mode. It is especially useful for catching issues like invisible text or low-contrast elements.

What does the compatibility score measure?

The 0-100 score combines checks across CSS compatibility (25+ rules), link validation, image attributes, accessibility, and document structure. Errors deduct 10 points and warnings deduct 3 points. A score above 80 means your email is well-optimized for cross-client compatibility. The detailed breakdown shows exactly which properties to fix.

Can this tool send test emails?

No. This tool previews and validates your email HTML entirely in your browser — no data is sent to any server. For sending test emails to real inboxes, use services like Litmus, Mailtrap, or Email on Acid.

Part of 23+ free developer tools from BigDevSoon

Want to create your own tool?

Try our free Demo editor or start a 7-day trial with all features included.

Start Free Trial Open Demo Editor

No signup needed for demo editor

More Developer Tools

HTML

Markdown Editor

Write and preview Markdown with a full-featured editor. GitHub-flavored Markdown, toolbar shortcuts, and live HTML preview.

Data

JSON Formatter

Format, validate, and minify JSON data with line numbers. Real-time validation as you type.

Encoding

Base64 Encoder/Decoder

Encode text to Base64 or decode Base64 back to text in real time. Useful for data URIs, API tokens, and more.