TWE Logo
Email Builder
* Header (Required)
* Footer (Required)
Selected Partials

Select partials below

Available Partials
Select Brand

Brands include custom color schemes and settings. Contact admin to create new brands.

Assets Base URL

Replace image/asset paths. Examples:
• Empty = keep original paths (../assets-v2/...)
• https://cdn.example.com = https://cdn.example.com/assets-v2/...
• /static = /static/assets-v2/...
Applied to preview and export.

Mail Settings & Testing
Switch between different brand templates
Used in <title> tag
Shown in email client preview (preheader)
Used for export folder/file naming

Send a test version of your email to verify how it renders in email clients.

Subject line will be prefixed with "TEST - ". Make sure header and footer are selected.
Will be sent as: "TEST - [your subject]"
Enter up to 5 email addresses (leave blank for unused fields)
Send Log
Recent test email activity
Project Management

Save your work as a project file. Projects can be stored on the server or downloaded to your computer.

Save Project
Save to server for quick access or download as .json file for backup/sharing.
Load Project
- OR -
Upload a previously downloaded .json project file
Dynamic Content Fields

Edit placeholder values in selected partials:

Select partials to see editable fields

Email Coding Best Practices
  • border-collapse: collapse required on all tables
  • Set mso-table-lspace: 0; mso-table-rspace: 0; for Outlook
  • Outer wrapper tables must have width="100%"
  • Content tables typically use width="600" for desktop
  • Use role="presentation" for accessibility
  • ALL styles must be inline - many clients strip <style> tags
  • Colors: Use full 6-digit hex codes (e.g., #FF0000 not #F00)
  • Fonts: Always provide fallback stacks (e.g., Georgia, serif)
  • Line height: Use mso-line-height-rule: exactly for Outlook consistency
  • Padding/Margins: Test thoroughly - support varies by client
  • Media queries in <head> for mobile optimization
  • Use max-width instead of fixed widths where possible
  • Add width=\"100%\" and style=\"max-width: Xpx\" for fluid images
  • Stack tables vertically on mobile with display: block
  • Increase font sizes and touch targets for mobile
  • Conditional comments: <!--[if mso]>...<![endif]-->
  • VML for background images: <v:rect>, <v:image>
  • Use <table> for layout - no CSS positioning
  • Outlook ignores padding on <div> - use table cells
  • Test with both Outlook Desktop and Outlook.com
<!--[if mso]>
<v:roundrect arcsize="10%" fillcolor="#4A90E2" strokecolor="#4A90E2">
<w:anchorlock/>
<center style="color: #ffffff; font-family: sans-serif;">
<![endif]-->
<a href="URL" style="background-color:#4A90E2;
   border:1px solid #4A90E2; color:#ffffff;
   display:inline-block; padding:12px 30px;
   text-decoration:none;">Button Text</a>
<!--[if mso]></center></v:roundrect><![endif]-->
  • Always include alt text
  • Set explicit width and height attributes
  • Use display: block to remove bottom spacing
  • Add border: 0 to remove default borders
  • Host on CDN, never use relative paths
  • Optimize file size - aim for <100KB per image
  • Use color-scheme: light only to prevent inversion
  • Add .force-white class to maintain white backgrounds
  • Test logos - may need separate dark mode versions
  • Avoid transparent PNGs if background matters
  • Gmail clips emails over ~102KB - keep size down
  • Mobile app strips many CSS properties
  • Use full URLs for all links and images
  • Avoid CSS shorthand properties
  • Format: [[#variableName#]]
  • Use descriptive names: [[#customerFirstName#]]
  • Document all placeholders in partial comments
  • Provide fallback values where appropriate
  • ✓ Outlook 2016/2019/365 (Windows)
  • ✓ Gmail (Web, iOS, Android)
  • ✓ Apple Mail (macOS, iOS)
  • ✓ Outlook.com
  • ✓ Yahoo Mail
  • ✓ Dark mode variants
  • ✓ Image blocking scenarios
  • Use multipart/alternative format (text + HTML)
  • Include RFC-compliant Message-ID header
  • Set proper Reply-To and Date headers
  • Use quoted-printable encoding for large emails
  • Add delays between recipients (0.5s recommended)
  • Keep total email size under 100KB when possible
  • Test with multiple recipients before bulk sending
  • Use .htaccess to prevent directory browsing
  • Implement IP whitelisting for access control
  • Enable session logging only when debugging
  • Store SMTP credentials encrypted at rest
  • Review export history regularly and delete old exports
  • Keep master files backed up before editing
  • Use strong admin passwords in production
Bootstrap 4 Email Builder

A comprehensive tool for building transactional emails with brand-specific customization, dynamic content management, and multi-format export capabilities. Build professional HTML emails using a modular partial system with live preview and dynamic content editing.

1. Select Brand
Choose a brand from the Brand tab. Each brand has its own partials and color scheme.

2. Select Header & Footer (Required)
Choose a header and footer from the dropdown menus at the top. Every email must have both for export.

3. Add Content Partials
Click partials from the "Partials" tab to add them to your email. They'll appear in "Selected Partials".

4. Arrange Order
Drag partials in the Selected area to reorder them, or use the ↑↓ arrow buttons.

5. Edit Dynamic Content
Go to the "Dynamic" tab to edit placeholder text like [[#customerName#]], prices, addresses, order details, etc.

6. Customize Colors
In the "Brand" tab, click "Scan Email Colors" to detect all colors. Edit them and save as brand presets for reuse.

7. Configure Assets
In the "Brand" tab, set the "Assets Base URL" to point images to your CDN or server (e.g., https://cdn.example.com).

8. Preview
View your email in Desktop/Tablet/Mobile sizes using the preview toolbar buttons.

9. Save Project
In the "Templates" tab (now "Project Management"), save your current work to server or download as JSON to resume later.

10. Test Email (Optional)
Send test emails using the Test Email tab. Admin configures SMTP settings, you just provide subject and recipients.

11. Admin Control (Optional)
Access the "Admin" tab to edit master template files, manage brands, configure SMTP, and customize builder theme. Password required (default: admin123).

12. Export
Enter an internal name, check "Export as ZIP" if needed, and click Export. You'll get the complete assembled email plus individual partial files.

  • Project Management: Save to server or download projects as JSON files for portability and version control
  • Export History: View, preview, download, and manage all exported emails with full metadata
  • Brand Management: Users select brands; admins create, edit, and delete all brands including Default
  • IP Whitelist Security: Admin-configurable IP restriction to control builder access
  • Theme Customization: Admin can customize splash screen logo and builder color scheme
  • SMTP Configuration: Admin sets default SMTP settings; users send test emails with simple subject/recipient interface
  • Multi-Recipient Support: Send to up to 5 recipients simultaneously with Gmail optimization
  • Color Scanner: Automatically detect and categorize colors (buttons, text, links, backgrounds)
  • Dynamic Placeholders: [[#variable#]] format for personalization fields
  • Custom Partials: Create and edit reusable content blocks for any brand
  • ZIP Export: Download complete email package as a ZIP file
  • Assets URL Replacement: Replace relative asset paths with CDN URLs for production
  • Responsive Preview: Test desktop, tablet, and mobile layouts instantly
  • Email Coding Best Practices: Built-in documentation (Technical tab) for email development
  • Admin Master File Editor: Password-protected system to edit master templates and partials (affects all new brands)
  • Session Logging: Optional detailed logging for debugging (admin only)
  • Directory Protection: Automatic .htaccess files prevent directory browsing of exports
  • User Role: Select existing brands from dropdown in Brand tab
  • Admin Role: Create new brands, edit all existing brands (including Default), scan and save brand colors
  • Default Brand: Contains the base partials used as templates; editable by admin
  • Custom Brands: When you select a brand, partials are automatically copied from default if they don't exist
  • Editing Partials: Click the edit icon (✏️) on any partial to modify its content for the current brand
  • Colors: Each brand can have its own saved color scheme
  • Assets: Configure different asset URLs per brand in the Brand tab
  • Save to Server: Store projects as JSON files in templates/ folder (prefixed with "project-")
  • Download Project: Export project as .json file for backup or sharing with team
  • Upload Project: Load previously downloaded .json files to restore exact builder state
  • Load from Server: Select and load any saved project from server dropdown
  • Delete Projects: Remove server-stored projects with confirmation prompt
  • Project Data: Includes config, selected partials, header/footer, brand, colors, and dynamic content
  • Dynamic Content: Always use [[#descriptiveName#]] format for placeholders
  • Image Assets: Store images in assets-v2/images/ or use the Assets Base URL field for external hosting
  • Color Scanning: Scan colors after adding partials to see element context (Button Background, Link Text, etc.)
  • Export Comments: Exported files include helpful comments showing which fields are editable
  • Project Recovery: Save projects before major changes so you can revert if needed
  • Testing: Check the Technical tab for email client compatibility guidelines
  • ZIP Export: Use ZIP export to easily share complete email packages with developers
  • Admin Access: Use Admin tab to update master templates - all changes are auto-backed up before saving
  • Theme Customization: Admin can update splash logo and builder colors in real-time
  • Master File Editing: Edit the base templates that all brands copy from
  • Brand Management: Create new brands, edit all brands including Default, manage brand colors
  • SMTP Configuration: Set default SMTP settings for test emails (host, port, encryption, credentials)
  • IP Whitelist: Restrict builder access to specific IP addresses with blocked user messaging
  • Theme Customization: Configure splash screen logo, gradient colors, and builder primary colors
  • Session Logging: Enable detailed action logging for debugging and audit trails
  • Automatic Backups: Every master file change creates a timestamped backup
  • Session Protection: Admin login required (password: admin123 - change in production!)
  • Impact Scope: Master edits affect NEW brand copies only, existing brands remain unchanged
  • Safety Warnings: Confirmation prompts before saving to prevent accidental changes

Developed by Ant at Biglook as a personal side project and conceptual demonstration. This builder represents a complete rebuild and modernization of the original 2019 beta version, incorporating lessons learned over six years of use and feedback. Built in spare time to explore self-contained PHP applications and modular email template systems.

Technical Stack: PHP 8.2+ • Bootstrap 4.6 • jQuery 3.6 • SortableJS 1.15
Version: 3.0 (December 2025) • Export Formats: Folder & ZIP
New in 3.0: Project management system • Brand editing for admin • Theme customization • SMTP defaults • Test email simplification
Previous: 2.1 (Admin master editor, splash screen) • 2.0 (Color scanner, dynamic content) • 1.0 Beta (2019)

  • Template Library System: Pre-built email templates (order confirmation, shipping notification, password reset, etc.) that users can customize instead of building from scratch
  • Drag-and-Drop Visual Builder: WYSIWYG editor allowing users to drag partials directly into the preview area and edit content inline without switching tabs
  • Multi-Language Support: Manage translations for email content, allowing easy switching between languages for international brands
  • A/B Testing Integration: Create multiple variants of emails and track which performs better with analytics integration
  • Scheduled Exports & Automation: Schedule automatic exports at specific times or trigger exports via webhook/API for integration with external systems
  • Collaboration Features: Real-time multi-user editing with role-based permissions (viewer, editor, admin) and change tracking/comments system
  • Advanced Analytics Dashboard: Track email open rates, click-through rates, device breakdown, and client statistics with visual charts and trend analysis
  • Image Upload & Management: Built-in asset manager with drag-drop upload, image optimization, crop/resize tools, and organized folder structure
  • Brand Style Guide Enforcement: Define and enforce brand guidelines (approved fonts, color palettes, spacing rules) with validation warnings when rules are violated
  • Smart Placeholder Management: Auto-detect placeholders across all partials, centralized editing interface, bulk find/replace, and suggest related placeholders based on context
Logo

Email Builder

Access Restricted

Sorry - use of this tool is restricted and you do not appear to be whitelisted. Please contact Ant for support.

Your IP: 216.73.217.169