HTML Email Builder

Visual drag-and-drop email template builder. Add sections, images, buttons, and export clean HTML code.

Add Sections

Sections (5)

HHeader

TText Block

BButton

-Divider

FFooter

Click a section in the list to edit its content and style.

Email Preview

Your Email Header

This is a text block. Click to edit the content of this section.

Click Here

You received this email because you are subscribed. Unsubscribe here.

Generated HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Email</title>
</head>
<body style="margin:0;padding:0;background-color:#f4f4f4;font-family:Arial,sans-serif;">
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#f4f4f4;">
    <tr>
      <td align="center" style="padding:20px 0;">
        <table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" style="max-width:600px;width:100%;background-color:#ffffff;">
    <tr>
      <td style="padding:24px;background-color:#BB8800;text-align:center;">
        <h1 style="margin:0;font-size:28px;font-weight:bold;color:#ffffff;font-family:Arial,sans-serif;">Your Email Header</h1>
      </td>
    </tr>
    <tr>
      <td style="padding:24px;background-color:#ffffff;text-align:left;">
        <p style="margin:0;font-size:16px;line-height:1.6;color:#333333;font-family:Arial,sans-serif;">This is a text block. Click to edit the content of this section.</p>
      </td>
    </tr>
    <tr>
      <td style="padding:24px;background-color:#ffffff;text-align:center;">
        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin:0 auto;"><tr><td style="padding:12px 28px;background-color:#BB8800;border-radius:6px;"><a href="https://example.com" style="color:#ffffff;font-size:16px;font-weight:bold;text-decoration:none;font-family:Arial,sans-serif;display:inline-block;">Click Here</a></td></tr></table>
      </td>
    </tr>
    <tr>
      <td style="padding:8px 24px;background-color:#ffffff;text-align:left;">
        <hr style="border:none;border-top:1px solid #e0e0e0;margin:0;" />
      </td>
    </tr>
    <tr>
      <td style="padding:24px;background-color:#f5f5f5;text-align:center;">
        <p style="margin:0;font-size:12px;line-height:1.5;color:#999999;font-family:Arial,sans-serif;">You received this email because you are subscribed. Unsubscribe here.</p>
      </td>
    </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

Generates table-based HTML for maximum email client compatibility. The output uses inline styles and is compatible with Gmail, Outlook, Apple Mail, and most other email clients.

How to Use HTML Email Builder

1

Choose a template

Start with a blank canvas or select a pre-built email layout.
2

Add content blocks

Drag in headers, text, images, buttons, and dividers.
3

Style the email

Set colors, fonts, padding, and background for each section.
4

Export the HTML

Copy the inline-styled HTML ready for your email platform.