Email Builder
A comprehensive visual email editor powered by GrapesJS for creating professional HTML email templates with drag-and-drop functionality.
Email Format
Every email you build here is produced as HTML:
- Uses traditional HTML table layouts for email compatibility
- Requires manual responsive design considerations
- More flexible for custom styling and layouts
Editor Features
Visual Building Blocks
The editor provides drag-and-drop building blocks:
- Structure components: Sections, columns, and containers
- Content elements: Text, images, buttons, and links
- Styling options: Colors, fonts, spacing, and responsive behavior
Saving Your Work
If you leave the page with unsaved changes, the editor asks whether to save them or discard them.
Test Email Functionality
Click the "Send test mail" button to open a modal where you can:
- Select recipient email addresses (add multiple test recipients)
- Choose a verified sender email from your organization
- Send the current email template with your custom subject, preheader, and sender name
This allows you to preview how your email will appear in real email clients and ensure all dynamic content and styling renders correctly before sending to your full audience.
Border Visibility Toggle
Use the "View components" command to visualize component boundaries and spacing during design.
Code Management
Import Code
Import existing HTML code directly into the editor:
- Click "Import code" to load external templates
- Accepts HTML
- Automatically parses and converts code into editable components
Edit Code
Access the raw code view for advanced editing:
- Click "Edit code" to open the Monaco editor (the same editor that powers VS Code)
- HTML syntax highlighting, auto-indent, bracket matching, and word wrap
- Automatic code formatting when the editor opens
- "Apply" pushes your changes back to the visual editor, "Cancel" discards them
AI-Powered Generation
Generate professional email templates using AI assistance with flexible options:
Generation Modes
Generate Mode
Create from Scratch
Start with a blank canvas and let AI build your email based on your description. Perfect for new campaigns or when you have a clear vision of what you want.
Edit Mode
Improve Existing Content
Enhance your current email template while preserving its structure. Ideal for refining existing designs or making targeted improvements.
AI Configuration Options
Template References Attach existing templates for style and structure inspiration:
- Browse and select from your saved email templates
- AI analyzes structure, tone, and design patterns
- Multiple templates can be attached for reference
Recent Email References Include previously sent emails as examples:
- Select from your campaign history
- AI learns from successful email patterns
- Useful for maintaining brand consistency
Variable Support Control whether AI can use dynamic variables in generated content:
- Enable to allow
{{variable}}format placeholders - Disable for static content generation
- Variables are automatically populated during sending
Dynamic Content & Variables
Basic Fields
Pre-defined variables for common contact information:
{{email}}
{{name}}
{{created_at}}
{{state}}
Custom Fields
Organization-specific variables from your contact database:
{{customFieldName}}
Reserved Variables
System-generated URLs for email management:
{{subscribeURL}}
{{unsubscribeURL}}
{{unsubscribeURL}} in a regular email — or {{subscribeURL}} in a verification email — it is added to the footer automatically.Fallback Values
If a contact has no value stored for a variable, the raw tag is left visible in the sent email. Add a fallback after a pipe inside the tag to control what gets sent instead:
{{name|there}}— sends "there" whenever the contact's name is missing or empty{{name|}}— an empty fallback leaves the spot blank{{name}}— no fallback: the tag stays visible, so mistakes are easy to catch in test sends
Subject & Preheader Personalization
Variables and fallbacks work in the subject line and preheader too — type them into those inputs the same way as in the email body. Campaign lists and previews keep showing the raw tag; the real value is filled in for each recipient at send time.
Usage Instructions
Building Your Email
- Drag and drop building blocks from the sidebar
- Customize content, styling, and layout
- Use the AI generator for initial content creation
- Fine-tune with direct code editing if needed
Dynamic Data Integration
Insert variables using the {{variableName}} pattern:
- Click on text elements to edit content
- Type or paste variable placeholders
- Variables will be replaced with actual data when emails are sent
Button Actions
Set button links to reserved variables for user management:
- Use
{{subscribeURL}}for subscription confirmation - Use
{{unsubscribeURL}}for easy opt-out - Links automatically handle user preferences
Footer Fallback
If you don't include {{unsubscribeURL}} in a regular email, or {{subscribeURL}} in a verification email, it's added to the footer automatically for compliance.