> Lettrove docs 1.x · https://docs.lettrove.com/docs/editor/modes/email

# 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

```ts
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](/docs/editor/exports).

## 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:

```ts
// 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](/docs/editor/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.