Email Template Builder: HTML Emails

What Is Email Template Builder?

Email Template Builder is a visual, block-based editor for creating responsive HTML email templates directly in your browser. You add content blocks — headers, text paragraphs, buttons, images, dividers, two-column layouts, and footers — arrange them with up/down controls, and edit each one through a properties panel. A live iframe preview updates as you build. When you are done, the tool generates a complete table-based HTML email with inline CSS, proven compatible with Gmail, Outlook, and Apple Mail. No design software, no coding, and no account required.

Key Features

• Visual block-based email editor — Build your email by adding and reordering content blocks. Seven block types: header, text, button, image, divider, two columns, and footer.
• Header, text, button, image, divider, and footer blocks — Each block has its own property panel. Headers have background and text color pickers. Text blocks let you choose font size (12px–24px) and alignment (left, center, right). Button blocks accept a label, URL, and color pair. Image blocks take a URL, alt text, and width.
• Live preview with mobile/desktop toggle — The editor panel includes a real-time iframe preview. Toggle between desktop (full width) and mobile (375px) views without leaving the editor tab.
• Customize colors, fonts, and spacing — Global email settings control body background (#f4f4f4 default), content background (#ffffff), primary color, max width (480px, 600px, or 640px), and font family (Arial, Georgia, Helvetica, or Verdana).
• Export clean, responsive HTML — The HTML tab shows the full generated source: a standards-compliant table-based layout with inline CSS, preheader text, MSO VML button fallbacks for Outlook, and a responsive media query that collapses to full-width on screens under 600px.
• Copy HTML to clipboard — The "Copy HTML" button copies the entire generated HTML string in one click, with a "Copied!" confirmation state.
• Pre-built template starters — Three starter templates load instantly: Welcome, Newsletter, and Promo. Each includes pre-configured blocks appropriate to its purpose. Welcome and Newsletter use your current primary color; Promo uses its own red accent.
• 100% client-side — No email content is transmitted to any server. Runs fully offline once loaded.

How to Use Email Template Builder

Step 1: Configure Global Settings

Open Email Template Builder and locate the "Email Settings" card in the left panel. Fill in:

• Subject Line — Becomes the <title> tag in the exported HTML (visible in some email clients and used for accessibility).
• Preheader Text — The hidden preview line that appears after the subject in inbox previews. Defaults to "Preview text that appears in inbox...". Set this to a compelling one-line summary.
• Body Background / Content Background — Color pickers let you type a hex value or use the native color picker. The default light gray body (#f4f4f4) on white content (#ffffff) matches the visual pattern used by most major brands.
• Primary Color — Used automatically as the default background for new header and button blocks.
• Max Width — Choose 480px (compact), 600px (standard, default), or 640px (wider).
• Font Family — Arial (default), Georgia, Helvetica, or Verdana.

Step 2: Load a Template or Add Blocks

Option A: Load a template starter. Click "Welcome," "Newsletter," or "Promo" in the "Template Starters" card. The editor loads a complete set of blocks pre-configured for that use case. The Welcome template includes a header, a greeting text block, a "Get Started" CTA button, a divider, and a footer. The Promo template uses a hardcoded red (#e53e3e) header and button color and includes an image placeholder. The Welcome and Newsletter starters use your current primary color setting; the Promo template uses its own red color scheme.

Option B: Build from scratch. Click any block type in the "Add Block" card. Available blocks: Header, Text, Button, Image, Divider, Two Columns, Footer. Each new block appears at the bottom of the block list and opens its editor panel automatically.

Step 3: Edit Each Block

Click a block in the "Blocks" list to open its editor. Changes reflect immediately in the live preview.

• Header block: Heading and subheading text fields, plus background and text color pickers.
• Text block: A textarea for content (newlines create separate <p> tags), a font size dropdown (12px to 24px), and left/center/right alignment.
• Button block: Label text, destination URL, button background color, and button text color. The generated HTML includes MSO VML markup so Outlook renders a real button instead of a plain link.
• Image block: Image URL (or upload a local file), alt text, and width (e.g., 100% or 400px). Uploaded images are embedded as Base64 data URIs.
• Divider block: Color picker and thickness input (1–10px).
• Columns block: Two separate textareas for left and right column content.
• Footer block: A textarea for footer text (newlines become separate paragraphs), a link label and link URL field pair (for adding an unsubscribe link, for example), plus background and text color pickers.

Use the up/down arrow buttons to reorder blocks. Use the trash icon to delete a block.

Step 4: Preview and Export

Switch to the Preview tab for a full-page view of the email. Use the Desktop/Mobile toggle to verify the responsive layout at 375px.

Switch to the HTML Code tab to see the generated source. Click the textarea to select all text, or click "Copy HTML" to copy it to your clipboard. The code is ready to paste into any ESP (email service provider) like Mailchimp, SendGrid, or HubSpot.

Practical Examples

Example 1: Product Launch Announcement

Start with the "Promo" template starter. Replace the header text with your product name and launch tagline. Update the #e53e3e header background to your brand color using the color picker. Swap the placeholder image URL for your product screenshot. Edit the text block to describe the key benefit in one to two sentences. Update the button label ("Pre-order Now") and URL. Set the preheader text to "Introducing [Product] — available today." Export the HTML and paste it into your ESP.

Example 2: Weekly Newsletter

Load the "Newsletter" template. Set the subject to "Weekly Digest — Week of March 3, 2026". Edit the feature story text block with your lead article. Add a second "Two Columns" block below it for two shorter items side by side. Add a "Button" block with "Read the full archive" linking to your website. Adjust the footer text to include your unsubscribe link and physical mailing address as required by CAN-SPAM.

Example 3: Welcome Email Sequence

Use the "Welcome" template. Change the header subheading to "Your account is ready." Edit the body text to three short paragraphs: what the user can do, where to find help, and how to contact support. Replace the "Get Started" button URL with the actual onboarding URL. Switch to the Preview tab, toggle to mobile view, and confirm all text is readable at 375px. Export and upload to your ESP's automation workflow.

Tips and Best Practices

Set your primary color before loading a template. The template starters apply your current primary color to new header and button blocks. Changing the primary color after loading a template does not retroactively update existing blocks — each block's color is independently editable.

Use the preheader field. Many builders ignore it, but the preheader text directly influences open rates. The generated HTML hides it with display:none; ... max-height:0px; overflow:hidden — it will not appear visually in the email but will display in inbox previews.

Font sizes under 14px render poorly on mobile. The text block font size dropdown goes as low as 12px. In practice, use 14px or larger for body text. Use 12px only for legal disclaimers or footer fine print.

Test the 600px max width. The standard 600px max width works well on all major clients. The 480px option suits narrow-layout designs; 640px is only appropriate for clients that do not apply their own width constraints.

Outlook VML buttons require no extra steps. The generated HTML already includes the MSO VML conditional comment block around every button. If you are pasting into an ESP, make sure the ESP does not strip HTML comments, as the VML markup depends on them.

Common Issues and Troubleshooting

Live preview shows a blank white area. This happens before any blocks are added. Add at least one block, or load a template starter — the iframe will populate immediately.

Image block shows a broken image. The tool displays the image URL directly in an <img> tag. Verify the URL is publicly accessible (not behind authentication) and uses HTTPS. The alt text you enter is included in the exported HTML for accessibility.

Copied HTML shows broken layout in Outlook. Confirm the font family setting uses a web-safe stack (e.g., Arial, Helvetica, sans-serif). Web fonts (Google Fonts, custom fonts) do not render in Outlook. All four font options in the tool are web-safe stacks.

Two-column block collapses to single column on mobile. This is expected behavior from the MSO conditional comments and inline-block layout. On screens under 600px, the media query sets .email-container to width: 100%, and the 48%-wide inline-block columns wrap naturally. There is no option to force side-by-side columns on mobile.

Template starter does not use my brand color. Check the Primary Color setting in the Email Settings card before clicking a template starter button. The templates read the primary color at load time — changing it after loading requires manually updating each block's color picker.

Privacy and Security

Email Template Builder builds and previews email HTML entirely in your browser. No template content, subject lines, or image URLs are transmitted to any server. The live preview uses an iframe with sandbox="allow-same-origin" — no scripts execute within the preview. The tool works fully offline once the page has loaded, making it safe for confidential marketing content or client materials.

Frequently Asked Questions

Is Email Template Builder free to use? Yes. The full block editor, all seven block types, three template starters, live preview, and HTML export are completely free with no account required. Access the tool at /web/social/email-template-builder.

Does Email Template Builder work offline? Yes, once the page is loaded. All HTML generation happens in JavaScript on your device. The live preview loads image URLs from their source (which requires a connection), but the editor, block management, and HTML export all work offline.

Is my data safe with Email Template Builder? Your email content, subject lines, and design choices never leave your browser. The tool generates HTML locally and does not make any server requests with your data. It is safe to build confidential client emails or proprietary campaign content.

Which email clients does the generated HTML support? The tool generates table-based HTML with inline CSS, the layout method with the broadest email client compatibility. It includes MSO VML conditionals for Outlook button rendering and a responsive media query for mobile clients. It is designed for Gmail, Outlook (2016–2024), Apple Mail, and Yahoo Mail.

Can I add more than seven block types? The current editor supports seven block types: header, text, button, image, divider, columns, and footer. You can add the same block type multiple times to build complex layouts — for example, alternating text and image blocks, or multiple button blocks.

How do I add an unsubscribe link? Add a footer block. The footer editor includes a dedicated Link Label field and a Link URL field. Enter the link text (e.g., "Unsubscribe") and the destination URL. The generated HTML renders this as a clickable <a> tag below the footer text. You can also replace the URL with your ESP's unsubscribe merge tag after exporting.

What is the preheader text field? Preheader text is a short string (typically 40–130 characters) that email clients display after the subject line in the inbox list. It is hidden in the rendered email using CSS. The tool includes it in the generated HTML inside a <div> with display:none and max-height:0px.

Can I save templates I have built? Yes. Glyph Widgets supporters can use the PresetsPanel to save and reload the full editor state — all blocks, settings, and content — as a named preset stored in browser-local IndexedDB.

What max width should I use? 600px is the industry standard and works correctly in all major clients. Use 480px if you want a narrower, more focused layout. Use 640px only if you have confirmed your target ESP and clients handle it correctly — some older Outlook versions apply their own width constraints.

Does the tool support custom fonts? No. The four font families in the font dropdown are all web-safe stacks: Arial, Georgia, Helvetica, and Verdana. Web fonts are not supported because most email clients — especially Outlook — do not load external font files.

Related Tools

• Email Extractor — Extract and validate email addresses from any text, then use them with the templates you build here.
• Social Meta Tags — Generate Open Graph and Twitter Card tags to optimize how your campaign landing pages look when shared socially.
• Hashtag Generator — Generate relevant hashtags for the social media posts that drive traffic to your email signup forms.

Try Email Template Builder now: Glyph Widgets Email Template Builder