Overview:

A code editor for creating emails by writing custom HTML and CSS.

Main Components:

Code Editor (left side):

• CodeMirror-based HTML editor with syntax highlighting.

• Full HTML/CSS editing capabilities.

• File manager integration for inserting images.

• Default HTML email template provided.
  

Live Preview (right side):

• Real-time preview of the HTML code

• Rendered in an iframe showing how the email will appear

• Auto-adjusts iframe height based on content

Key Features:

• Full HTML Control: Write complete HTML structure with custom CSS

• Syntax Highlighting: Color-coded HTML/CSS for easier editing

• Live Preview: Real-time rendering of HTML code

• Preview Modes: Switch between desktop (600px) and mobile (375px) views

• File Manager: Insert images from media library directly into code

• Default Template: Pre-built HTML email template with responsive structure

• Code Validation: HTML structure validation and error detection

Purpose:

Provides full control over email HTML/CSS for advanced users who want to create custom-designed emails with their own code.

HTML Email Development Guide

Goal: Ensure your emails look professional and render correctly across Gmail, Outlook, and Mobile.

1. The Golden Rule: Use Tables, Not Divs

Unlike modern websites, email clients (especially Outlook) cannot handle flexbox or grid.

• Layout: Use <table>, <tr>, and <td> for all structures.

• Width: Set your main container to 600px. This is the industry standard for readability and cross-platform compatibility.

2. Styling: Keep it Inline

Most email providers strip out <style> tags in the header.

• Inline CSS: Apply styles directly to the element:

  <td style="font-family: Arial; color: #333333;">...</td>

• Spacing: Use padding on table cells. Avoid margin, as it is frequently ignored by Outlook.

3. Typography & Buttons

• System Fonts: Stick to "Web Safe" fonts like Arial, Helvetica, or Georgia. Custom web fonts (like Google Fonts) often fail to load.

• Bulletproof Buttons: Don't use the <button> tag. Use a styled link (<a>) with plenty of padding to ensure it's easy to tap on mobile.

4. Images & Media

• Hosting: Always use absolute HTTPS URLs (e.g., https://yourdomain.com/image.png).

• Alt Text: Always include alt="Description" so users know what the image is if it's blocked by the email client.

• Display: Add style="display:block;" to images to prevent unwanted gaps or "padding" added by Gmail.

5. Mobile & Dark Mode

• Simplicity: A single-column layout is best for mobile responsiveness.

• Dark Mode: Use high-contrast colors. Avoid using images with transparent backgrounds if they contain dark text, as they will disappear on dark backgrounds.

6. Compliance & Delivery

To prevent your emails from going to Spam:

• Preheader: Use a hidden <div> at the very top of your code to control the "preview text" seen in the inbox.

• Footer Requirements: You must include a physical mailing address and a clear Unsubscribe link.

• File Size: Keep your total HTML file size under 100 KB to prevent Gmail from "clipping" the bottom of your email.

HTML Email Development Guide

Overview

When creating HTML emails, you must follow specific rules because email clients (such as Gmail, Outlook, Yahoo, and Apple Mail) provide limited HTML and CSS support compared to web browsers.

The Pabbly HTML Email Builder validates your code and prevents saving or sending if critical rules are violated.

Errors (Block Save & Send)

These issues must be fixed before you can save or send your email template.

1. No JavaScript Allowed

Email clients block all JavaScript for security reasons. The following are strictly prohibited:

• <script> tags (remove all script tags and their content)

• Event handler attributes (onclick, onload, onmouseover, onfocus, etc.)

• JavaScript URLs (href="javascript:...", src="javascript:...")

❌ Not Allowed

<script>alert('hello')</script> <a href="javascript:void(0)">Click</a> <div onclick="doSomething()">Click me</div>

✅ Correct

<a href="https://example.com">Click</a>

2. No Unsupported HTML Elements

The following HTML elements are not supported by most email clients:

❌ Wrong Way to use Button (Not Allowed in Email)

<button>Click Me</button>

Why?

• Not supported properly in Gmail

• Breaks in Outlook

• Many clients remove button styling

• No reliable hover effects

✅ Correct Way to use Button (Email-Safe Button)

In emails, we create fake buttons using tables + links.

This is called a Bulletproof Button.

<table align="center" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td bgcolor="#0D68E9" 
        style="padding:12px 25px; background-color:#0D68E9;">
      <a href="https://example.com"
         style="color:#ffffff; 
                font-family:Arial, Helvetica, sans-serif; 
                font-size:14px; 
                font-weight:bold; 
                text-decoration:none; 
                display:inline-block;">
        Get Started
      </a>
    </td>
  </tr>
</table>

3. No External Stylesheets

Email clients do not load external CSS files.

❌ Not Allowed

<link rel="stylesheet" href="styles.css">

✅ Correct (Use Inline Styles)

<p style="color: #333333; font-size: 14px;">Your text here</p>

Warnings (Informational)

These issues will not block saving but may cause rendering inconsistencies in some email clients.

4. Use Inline CSS Instead of <style> Tags

Most email clients have limited support for <style> blocks.
Only @media queries (for responsive design) should be placed inside <style> tags.

✅ Recommended

<style> @media only screen and (max-width: 600px) { .email-container { width: 100% !important; } } </style>

All other CSS should be inline:

<td style="padding: 20px; background-color: #ffffff;">

5. Avoid Advanced CSS

The following CSS properties are not widely supported:

• display: flex (Flexbox)

• display: grid (CSS Grid)

• animation, transition

• position: absolute | fixed | sticky

• float

• z-index

👉 Use table-based layouts instead.

Best Practices

6. Use Table-Based Layouts

Tables provide the most reliable layout structure across all email clients.

<table width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width: 600px; margin: 0 auto;"> <tr> <td style="padding: 20px;"> Your content here </td> </tr> </table>

7. Use Web-Safe Fonts

Only use fonts available across operating systems:

Recommended Fonts:

• Arial

• Helvetica

• Georgia

• Times New Roman

• Courier New

• Verdana

• Tahoma

• Trebuchet MS

Always include a fallback:

font-family: Arial, Helvetica, sans-serif;

Avoid:

• Google Fonts

• Custom web fonts (limited support in email clients)

8. Use Table-Based Buttons (Outlook Compatible)

Standard <a> buttons may break in Outlook. Use table-based buttons instead:

<table cellpadding="0" cellspacing="0" border="0"> <tr> <td align="center" bgcolor="#0D68E9" style="background-color: #0D68E9; border-radius: 5px; padding: 15px 30px;"> <a href="https://example.com" style="color: #ffffff; text-decoration: none; font-family: Arial, sans-serif; font-size: 16px;"> <span style="color: #ffffff;">Button Text</span> </a> </td> </tr> </table>

Important:
Wrap the button text inside a <span> with a color style. Outlook may override link colors, but it respects <span> styles.

9. Use the bgcolor Attribute for Outlook

Outlook may ignore background-color CSS.
Always use both:

<td bgcolor="#667eea" style="background-color: #667eea; padding: 30px;">

10. Use Padding Instead of Margin

Margins are inconsistently supported in email clients.

❌ Avoid

<p style="margin: 20px;">Text</p>

✅ Recommended

<td style="padding: 20px;"> <p style="margin: 0;">Text</p> </td>

11. Image Best Practices

• Always include alt text

• Set explicit width and height attributes

• Use style="display: block;" to remove image gaps

• Host images on a reliable server

• Use absolute URLs only

<img src="https://example.com/image.png" alt="Product Image" width="600" height="300" style="display: block; max-width: 100%;" />

12. Email Width

• Keep the maximum width at 600px

• Use a centered container table with max-width: 600px

13. Responsive Design

Use @media queries inside <style> tags:

<style> @media only screen and (max-width: 600px) { .email-container { max-width: 100% !important; width: 100% !important; } } </style>

14. Lists

For better compatibility, use table rows instead of <ul>/<li>:

<table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td style="padding: 5px 0 5px 10px;">&#8226; Item one</td> </tr> <tr> <td style="padding: 5px 0 5px 10px;">&#8226; Item two</td> </tr> </table>

Quick Reference: Allowed vs Not Allowed

Footer Protection Rules (HTML Email Builder)

NOT Editable (Protected)

Editable (Allowed)

Key Rule

Any CSS none value is allowed except on display, visibility, and opacity properties - those are blocked because they hide content.