The email template designer builds newsletters, receipts and notices from rows of one to three columns holding headings, text, buttons, images, dividers, spacers and lines of links. Drag from the Add list or click, drag to reorder, and change everything in the settings panel — or do it all from the keyboard.
What comes out is the HTML email clients still need: tables, inline styles, columns that stack on a phone, Outlook for Windows looked after, preview text, and a plain-text part to send with it. Merge fields stay for your sending service to fill; the preview fills them with samples. Problems are listed before you send, and the design is plain JSON for your own database.
A newsletter
A coffee roaster's autumn newsletter. Click a block to change it, drag blocks and rows from the Add list, switch to Preview to see the exported HTML at wide-screen and phone widths, and tick Fill in merge fields to see it as Ada would.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-email-designer id="ed-news" label="Autumn newsletter" style="inline-size: 100%"></bmx-email-designer>
A receipt, and its plain text
Transactional emails are mostly merge fields. This receipt's HTML and plain-text parts are below, as your sending service would receive them; edit the receipt and they follow.
Plain text
HTML ()
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-email-designer id="ed-receipt" label="Order receipt" style="inline-size: 100%; --bmx-email-designer-height: 30rem"></bmx-email-designer>
Checked before sending
A draft with things to fix: no subject or preview text, an image with no description that links to an address that is not secure, a button that goes nowhere and a merge field the sending service does not know. Open Problems and each one leads to its block.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-email-designer id="ed-draft" label="Draft announcement" style="inline-size: 100%; --bmx-email-designer-height: 28rem"></bmx-email-designer>