Email

An email project makes emails: HTML built for inboxes, with a subject and a preheader. It is the default mode.

What your users make

A single column up to 800px wide (600px is the usual width), built from sections, columns and blocks: headings, text, images, buttons, dividers, spacers, social icons and raw HTML. Every email also has:

• a subject, and a preheader (the line inboxes show after the subject);
• a phone layout: columns stack on small screens, and the editor previews it.

Getting it out

const email = await editor.exportHtml({
  merge: { contact: { first_name: 'Ada' }, unsubscribeUrl: 'https://acme.com/u/123' },
});

email.html;      // '<!doctype html><html …>' — the email, ready for any sending service
email.text;      // the plain-text version, to send beside the HTML
email.subject;   // 'Welcome to Acme'
email.preheader; // 'Your account is ready'
email.mergeTags; // tags still in it, e.g. ['{{contact.company}}'] — fill them before sending
email.warnings;  // e.g. ['The email is 118 KB; Gmail clips messages past about 102 KB.']

The HTML is compiled for email clients (tables, inline styles, Outlook fixes), every image in it is hosted at an https:// address (inboxes drop images embedded in the HTML), and it is minified.

Format	From the page	From your server	In the editor's Download menu
HTML	exportHtml()	designs.export(id, { user })	yes
Plain text	exportPlainText()	in designs.export's text	yes
PDF	exportPdf()	format: 'pdf'	yes
PNG	exportImage()	format: 'png'	yes
ZIP (HTML, text, images)	exportZip()	format: 'zip'	yes

Details of each: Getting designs out.

Sending

Lettrove never sends from the editor. You send the exported HTML with your own email service — SendGrid, Amazon SES, Postmark, Resend, Mailgun or any other — exactly as you send email today:

// Your server, with your email service of choice. Resend shown here.
const email = await lettrove.designs.export(designId, {
  user: { id: userId },
  merge: { contact: { first_name: 'Ada' }, unsubscribeUrl },
});

await resend.emails.send({
  from: 'Acme <hello@acme.com>',
  to: 'ada@example.com',
  subject: email.subject,
  html: email.html,
  text: email.text,
});

Personalising

Your users type merge tags such as {{contact.first_name | "there"}} into the email; you fill them when you export. See Merge tags.

Good to know

• Gmail clips emails past about 102 KB behind "View entire message". When an export is over that, warnings says so.
• Forms are not offered in emails: most inboxes do not run them. Use a button that links to a landing page.
• An email's design opens in the editor of any later 1.x release, unchanged.