Visual email builder

Available on Starter, Basic, Professional, and Unlimited plans

Compose mailings by dragging blocks onto a canvas. The builder is one of four editor modes available on /mailing/compose:

• Builder — drag-and-drop blocks (this page)
• HTML — raw HTML for pixel-perfect control
• Markdown — fast plain-text-friendly authoring
• Preview — render the final email exactly as recipients will see it

Switching tabs preserves your content. Editing in HTML and switching back to Builder reopens the canvas with the same content as a single editable block.

What the builder produces

The builder uses the GrapesJS Newsletter preset, which produces table-based HTML. This is intentional:

• Every major email client renders tables identically (Outlook 2007+, Gmail, Apple Mail, mobile Outlook)
• Modern responsive techniques (flex / grid) don't survive Outlook's Word-renderer
• Inline styles only — <style> blocks are dropped by some clients

The canvas's CSS is inlined into the rendered HTML automatically when you save or send.

Block library

Drag from the right panel:

Stock blocks (Newsletter preset)

• Hero — single-column header with image, title, subtitle
• Text — paragraph block
• Image — single image with alt text
• Button — bulletproof table-button (renders as a real rectangle in Outlook)
• Divider — horizontal rule
• Two columns — equal split with optional gutter
• Three columns — for feature grids
• Footer — typical email footer

FastLinkIt blocks (custom)

Your own monetization surfaces drop in pre-styled. The block list is generated dynamically from your active items at /api/mailing/builder/blocks:

• Donation card — one block per active fundraising campaign you own. Renders campaign title, image, raised-vs-target, and a Donate now button linking to the campaign page.
• Product card — one per active payment product. Image, name, price, Buy now button.
• Booking card — one per active planner. Logo, title, Book a slot button.
• Shop card — one per active shop. Title, description, Visit shop button.

All snippets use the fluid-hybrid responsive pattern (max-width: 600px + Outlook ghost-table fallback) so they shrink cleanly on mobile.

Image library

Clicking the image-block's image control opens the asset manager. It pre-loads with every image you've already uploaded to the platform — no need to re-upload an image you already used in a link or page. Drag a new image onto the asset panel to upload it; uploads count toward your storage quota.

Save as template

After you've built something good, click Save as template in the message-card header. The full GrapesJS state (block tree + content + styling) persists to a MailingTemplate row alongside the rendered HTML. Anyone with access to the template can pick it from the picker on a future compose; visually-built templates auto-open the Builder tab.

See Mailing templates for the full template lifecycle.

Worked example — branded monthly newsletter

Goal: build a newsletter once, let the team reuse it.

1. /mailing/compose → switch to Builder tab.
2. Drag a Hero block, set the title, image, and subtitle.
3. Drag two Text blocks for the lead article and a feature update.
4. Drag a Donation card for your active fundraising campaign.
5. Drag a Two-column block, place a Product card in each column.
6. Click Save as template → name it Monthly newsletter.
7. Next month, anyone on the team picks the template, edits the headline and body, sends.

Related

• Mailing templates — save and reuse builder layouts
• A/B testing — test two builder layouts head-to-head
• Email Mailing — overview of the compose page