> ## Documentation Index > Fetch the complete documentation index at: https://docs.mailgreet.com/llms.txt > Use this file to discover all available pages before exploring further. # Creating Custom Templates > Build custom HTML email templates in MailGreet with the HTML Editor for complete control over your email design # 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 * Complex custom designs * Importing external templates * Pixel-perfect layouts * Advanced CSS styling * Developer-controlled emails * Quick email creation * Non-technical users * Standard layouts * Easy editing by team * Mobile-responsive defaults *** ## Creating an HTML Template Navigate to **[Templates](https://mailgreet.com/dashboard/templates)** in the sidebar Click the green **Create template** button Choose **HTML Editor** from the three format options: * Block-Based Editor (Recommended) * **HTML Editor** ← Select this * Plain Text Fill in the template information: * **Template Name** — A descriptive name * **Description** — Purpose of the template * **Category** — Newsletters, Marketing, Events, Transactional, or Custom 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 The email subject line that appears in inboxes 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: ```html theme={null} {{subject}}
``` *** ## 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: Start a new HTML template as described above Select all code in the editor and delete it Paste your external HTML code into the editor Replace static content with MailGreet variables where needed 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 Email clients have inconsistent CSS support. Use `` elements for reliable layouts, not `
` or flexbox. Many email clients strip `` styles. Use inline CSS on elements: ```html theme={null}

Text

``` Most email clients display best at 600px width. Use `max-width: 600px` for your container. Images are often blocked by default. Add descriptive `alt` attributes: ```html theme={null} Product image showing our new feature ``` JavaScript is stripped by all email clients. Never rely on JS for functionality. Stick to web-safe fonts (Arial, Georgia, Times New Roman) or use font stacks with fallbacks. *** ## Testing Your Template Before using in campaigns: The right panel shows how your email renders Resize your browser to check responsive behavior When used in a campaign, send a test to yourself 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 | *** ## Related Guides No-code visual editor alternative Browse and manage templates Test before sending Use templates in campaigns