Using the HTML Email Editor

The MigoSMTP HTML editor allows you to write or paste raw HTML for your email templates directly in the dashboard. This gives developers and designers complete control over every pixel of the email design. This article covers how to use the editor effectively, the technical requirements of HTML email, and common pitfalls to avoid.

Accessing the HTML Editor

1. Go to Templates → Create Template (or open an existing template).
2. In the content editor section, select the HTML tab or Code Editor mode.
3. The editor opens with a split view: code on the left, live preview on the right.
4. The preview updates as you type.

HTML Email vs Web HTML — Key Differences

HTML email does not behave like a web page. Email clients have inconsistent and often outdated HTML/CSS support. Understanding these differences is essential:

HTML Email Template Skeleton

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Email Title</title>
  <style>
    /* Reset styles */
    body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
    table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
    img { -ms-interpolation-mode: bicubic; }
    body { margin: 0; padding: 0; background-color: #f4f4f4; }
    /* Mobile styles */
    @media screen and (max-width: 600px) {
      .email-container { width: 100% !important; }
      .mobile-padding  { padding: 20px !important; }
      .mobile-full     { width: 100% !important; display: block !important; }
    }
  </style>
</head>
<body>
  <!-- Preheader text (hidden, shows as preview in inbox) -->
  <div style="display:none;max-height:0;overflow:hidden;mso-hide:all;">
    Your preview text here — keep under 100 characters
    &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
  </div>

  <!-- Outer wrapper -->
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr><td align="center" style="padding: 20px 0;">

      <!-- Email container -->
      <table class="email-container" role="presentation" width="600"
             cellpadding="0" cellspacing="0" border="0"
             style="background-color: #ffffff; border-radius: 8px;">

        <!-- Header -->
        <tr><td style="padding: 30px 40px; background-color: #1a1a2e; border-radius: 8px 8px 0 0;">
          <img src="https://yourcompany.com/logo.png" alt="Your Company" width="150" style="display: block;">
        </td></tr>

        <!-- Body -->
        <tr><td class="mobile-padding" style="padding: 40px;">
          <h1 style="font-family: Arial, sans-serif; font-size: 24px; color: #333333; margin: 0 0 16px;">
            Hi {{first_name}},
          </h1>
          <p style="font-family: Arial, sans-serif; font-size: 16px; color: #555555; line-height: 1.6;">
            {{email_body}}
          </p>
          <!-- CTA Button -->
          <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin: 24px 0;">
            <tr><td style="background-color: #10B981; border-radius: 6px; padding: 14px 28px;">
              <a href="{{cta_url}}" style="color: #ffffff; font-family: Arial, sans-serif; font-size: 16px;
                 font-weight: bold; text-decoration: none; display: block;">
                {{cta_text}}
              </a>
            </td></tr>
          </table>
          <p style="font-family: Arial, sans-serif; font-size: 14px; color: #999999;">
            If the button does not work, copy this link: <a href="{{cta_url}}">{{cta_url}}</a>
          </p>
        </td></tr>

        <!-- Footer -->
        <tr><td style="padding: 20px 40px; background-color: #f9f9f9; border-radius: 0 0 8px 8px;
                    border-top: 1px solid #eeeeee;">
          <p style="font-family: Arial, sans-serif; font-size: 12px; color: #999999; margin: 0;">
            © 2026 Your Company, 123 Business Street, Jaipur, Rajasthan 302001, India<br>
            <a href="{{unsubscribe_url}}" style="color: #999999;">Unsubscribe</a> |
            <a href="https://yourcompany.com/privacy" style="color: #999999;">Privacy Policy</a>
          </p>
        </td></tr>

      </table>
    </td></tr>
  </table>
</body>
</html>

Critical Rules for HTML Email

• Use tables for layout — not CSS Grid or Flexbox. Microsoft Outlook uses the Word rendering engine which does not support modern CSS layout. Table-based layouts work universally.
• Inline your CSS — before sending, run your HTML through a CSS inliner tool (like Juice or Premailer) to move all styles inline. MigoSMTP can do this automatically if you enable the CSS inlining option.
• Max width 600px — constrain your email content to 600px. This is the de facto email standard that works in all clients.
• Use absolute image URLs — images must be hosted on a public URL (CDN or your server). Relative paths and embedded base64 images cause issues in many clients.
• Always include alt text on images — when images are blocked, alt text ensures the email is still intelligible.
• Include a preheader — the hidden text above the visible content that appears as the preview in the inbox list. It should complement the subject line.
• Test in multiple clients — use a tool like Litmus or Email on Acid to preview your template in Gmail, Outlook 2016/2019/365, Apple Mail, and mobile clients before going live.

CSS Properties Supported Across All Major Email Clients

Next Steps

• Drag-and-drop template builder guide
• Responsive email design best practices
• Template variables & personalisation