Creating Custom HTML Templates

For developers and designers who want complete control, MailGreet’s HTML Editor provides full HTML/CSS capabilities with syntax highlighting, live preview, and variable support.

When to Use HTML Editor

Use HTML Editor For

Complex custom designs
Importing external templates
Pixel-perfect layouts
Advanced CSS styling
Developer-controlled emails

Use Block Builder For

Quick email creation
Non-technical users
Standard layouts
Easy editing by team
Mobile-responsive defaults

Creating an HTML Template

Go to Templates

Navigate to Templates in the sidebar

Click Create Template

Click the green Create template button

Select HTML Editor

Choose HTML Editor from the three format options:

Block-Based Editor (Recommended)
HTML Editor ← Select this
Plain Text

Enter Template Details

Fill in the template information:

Template Name — A descriptive name
Description — Purpose of the template
Category — Newsletters, Marketing, Events, Transactional, or Custom

Create Template

Click Create Template to open the HTML Editor

HTML Editor Interface

The HTML Editor provides a split-screen workspace:

Panel	Location	Purpose
Code Editor	Left	Write and edit HTML code
Live Preview	Right	See real-time rendering
Top Bar	Top	Subject, preheader, and actions

Top Bar Fields

Subject Line

The email subject line that appears in inboxes

Preheader

Preview text shown after the subject line

Editor Features

Syntax Highlighting — Color-coded HTML/CSS for readability
Line Numbers — Easy navigation for debugging
Auto-Indent — Clean, organized code
Live Preview — Instant visual feedback as you code

Writing Email HTML

Basic Template Structure

Start with this responsive email boilerplate:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{subject}}</title>
  <style>
    /* Reset styles */
    body { margin: 0; padding: 0; }
    table { border-collapse: collapse; }
    img { border: 0; display: block; }
    
    /* Container */
    .email-container {
      max-width: 600px;
      margin: 0 auto;
      background: #ffffff;
    }
  </style>
</head>
<body style="background-color: #f4f4f4;">
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
    <tr>
      <td align="center" style="padding: 20px;">
        <table class="email-container" role="presentation" width="600" cellpadding="0" cellspacing="0">
          
          <!-- Header -->
          <tr>
            <td style="padding: 20px; text-align: center;">
              <img src="YOUR_LOGO_URL" alt="Logo" width="150">
            </td>
          </tr>
          
          <!-- Content -->
          <tr>
            <td style="padding: 30px;">
              <h1 style="font-family: Arial, sans-serif; color: #333;">
                Hello, {{first_name}}!
              </h1>
              <p style="font-family: Arial, sans-serif; color: #666; line-height: 1.6;">
                Your email content goes here.
              </p>
              <a href="YOUR_CTA_LINK" style="display: inline-block; padding: 12px 24px; background: #16A34A; color: white; text-decoration: none; border-radius: 5px;">
                Call to Action
              </a>
            </td>
          </tr>
          
          <!-- Footer -->
          <tr>
            <td style="padding: 20px; text-align: center; font-size: 12px; color: #999;">
              <p>© 2026 Your Company. All rights reserved.</p>
              <a href="{{unsubscribe_link}}" style="color: #999;">Unsubscribe</a>
            </td>
          </tr>
          
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

Using Variables

Insert personalization variables anywhere in your HTML:

Variable	Description
`{{first_name}}`	Subscriber’s first name
`{{last_name}}`	Subscriber’s last name
`{{email}}`	Subscriber’s email address
`{{unsubscribe_link}}`	Required unsubscribe URL
`{{custom_field}}`	Any custom field you’ve created

Always include {{unsubscribe_link}} in your HTML templates. This is required for email compliance.

Importing External HTML

Have an HTML template from another source? Import it easily:

Create New Template

Start a new HTML template as described above

Clear Default Content

Select all code in the editor and delete it

Paste Your HTML

Paste your external HTML code into the editor

Add Variables

Replace static content with MailGreet variables where needed

Test Preview

Check the live preview to ensure proper rendering

Exporting Templates

Export as HTML

Click Export HTML to download the raw HTML file for use elsewhere.

Export as Template JSON

Export the complete template configuration for:

Backup purposes
Sharing with team members
Moving between MailGreet accounts

HTML Email Best Practices

Use Tables for Layout

Email clients have inconsistent CSS support. Use <table> elements for reliable layouts, not <div> or flexbox.

Inline Your CSS

Many email clients strip <head> styles. Use inline CSS on elements:

<p style="font-family: Arial; color: #333;">Text</p>

Set Width 600px Max

Most email clients display best at 600px width. Use max-width: 600px for your container.

Always Include Alt Text

Images are often blocked by default. Add descriptive alt attributes:

<img src="..." alt="Product image showing our new feature">

Avoid JavaScript

JavaScript is stripped by all email clients. Never rely on JS for functionality.

Use Web-Safe Fonts

Stick to web-safe fonts (Arial, Georgia, Times New Roman) or use font stacks with fallbacks.

Testing Your Template

Before using in campaigns:

Check Live Preview

The right panel shows how your email renders

Test on Mobile

Resize your browser to check responsive behavior

Send Test Email

When used in a campaign, send a test to yourself

Check Multiple Clients

View in Gmail, Outlook, Apple Mail, etc.

Common Issues & Solutions

Issue	Solution
Layout breaks in Outlook	Use table-based layout with `mso-` conditional comments
Images not showing	Use absolute URLs, not relative paths
Fonts look different	Use web-safe fonts with proper fallbacks
Background images not working	Many clients don’t support CSS background images
Styles being stripped	Inline all CSS, don’t use external stylesheets

Block Editor

No-code visual editor alternative

Template Library

Browse and manage templates

Testing Campaigns

Test before sending

Create Campaign

Use templates in campaigns

Get Started

Campaigns

Subscribers

Verifications

Templates

Automation

Analytics

Integrations

Settings

Troubleshooting

Creating Custom Templates

Creating Custom HTML Templates

When to Use HTML Editor

Use HTML Editor For

Use Block Builder For

Creating an HTML Template

HTML Editor Interface

Top Bar Fields

Subject Line

Preheader

Editor Features

Writing Email HTML

Basic Template Structure

Using Variables

Importing External HTML

Exporting Templates

Export as HTML

Export as Template JSON

HTML Email Best Practices

Testing Your Template

Common Issues & Solutions

Block Editor

Template Library

Testing Campaigns

Create Campaign

​Creating Custom HTML Templates

​When to Use HTML Editor

Use HTML Editor For

Use Block Builder For

​Creating an HTML Template

​HTML Editor Interface

​Top Bar Fields

Subject Line

Preheader

​Editor Features

​Writing Email HTML

​Basic Template Structure

​Using Variables

​Importing External HTML

​Exporting Templates

​Export as HTML

​Export as Template JSON

​HTML Email Best Practices

​Testing Your Template

​Common Issues & Solutions

​Related Guides

Block Editor

Template Library

Testing Campaigns

Create Campaign

Creating Custom HTML Templates

When to Use HTML Editor

Creating an HTML Template

HTML Editor Interface

Top Bar Fields

Editor Features

Writing Email HTML

Basic Template Structure

Using Variables

Importing External HTML

Exporting Templates

Export as HTML

Export as Template JSON

HTML Email Best Practices

Testing Your Template

Common Issues & Solutions

Related Guides