Free tool

Preview how your email renders

Paste your HTML and see the layout across clients, in dark mode, and at mobile width — before a recipient does.

Paste your HTML

<!doctype html>
<html><body style="margin:0;padding:0;background:#f4f4f5;font-family:Helvetica,Arial,sans-serif;color:#18181b">
  <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="padding:32px 16px">
    <tr><td align="center">
      <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" style="background:#fff;border-radius:12px;padding:40px">
        <tr><td>
          <h1 style="margin:0 0 16px;font-size:24px;color:#18181b">Welcome aboard!</h1>
          <p style="margin:0 0 24px;font-size:16px;line-height:1.6;color:#3f3f46">Thanks for signing up. Here's what to do next:</p>
          <ol style="font-size:16px;line-height:1.6;color:#3f3f46;padding-left:20px">
            <li>Verify your email</li>
            <li>Connect your domain</li>
            <li>Send your first campaign</li>
          </ol>
          <p style="text-align:center;margin:32px 0">
            <a href="#" style="background:#4f46e5;color:#fff;text-decoration:none;padding:12px 24px;border-radius:8px;display:inline-block;font-weight:600">
              Get started →
            </a>
          </p>
          <p style="margin:24px 0 0;font-size:12px;color:#a1a1aa">
            <a href="#" style="color:#a1a1aa">Unsubscribe</a>
          </p>
        </td></tr>
      </table>
    </td></tr>
  </table>
</body></html>

Show dark-mode preview

Linter findings (1)

No viewport meta tag
Add <meta name="viewport" content="width=device-width,initial-scale=1"> for mobile rendering.

Desktop · 600px

Mobile · 320px

The builder outputs email-safe HTML by default, so most of what this catches is markup written elsewhere.

Render preview · Free public tool