Email Preview Text

An email's preview text — the preheader — is the line an inbox shows beside the subject before the email is opened. Without one, "email clients will pull in the first part of your message by default", as Mailchimp puts it: in the default template, "My Company". MJML already has the element, mj-preview inside mj-head, which compiles to a hidden block at the top of the body, but the grapesjs-mjml plugin offers no way to add it from the canvas.

How it works

• The field sits in the Editor blade's bar, beside the dataset picker, labelled Preview text.
• It writes markup. The plugin registers mj-head as a component type but not mj-preview, and a component added by type serialises as a <div> the compiler ignores, so writeEmailPreviewText removes the preview it finds by tag and appends <mj-preview>…</mj-preview> to the head, the text escaped. The head keeps its other children, an email with no head gains one as the mjml root's first child, and emptying the field removes the preview. The edit is an ordinary change to the project, so the editor's own storage saves it, undo takes it back, and the save-time HTML capture (email web view) compiles it in.
• It reads back after every change. readEmailPreviewText reads the preview's text node on each editor update, so an undo shows in the field too.
• Merge fields work in it. A {{column}} in the preview text is substituted per row on export like any token in the body, since substitution runs over the whole compiled HTML (email personalization).
• The length is advice, not a cap. The field counts characters against EMAIL_PREVIEW_TEXT_INBOX_LENGTH, and past it says that most inboxes cut the line there.

Both services are tested against a headless GrapesJS editor with the installed plugin: the text reaches MJML's hidden preheader escaped, a second write replaces the first, and the head's other children stay.

What is deliberately not in it

• No subject line. A subject belongs to a send, and nothing sends (email sending); the preheader is part of the HTML itself, which is why it is useful before sending exists.
• No mj-title. The published web view is titled by the resource's name already.

Key files

Sources

• Mailchimp — About preview text — what the preview text is, and what an inbox shows without it.
• Mailchimp — Edit your email's subject line, preview text… — the field asked for beside the subject.
• MJML — mj-preview — the element, inside mj-head, that compiles to the hidden preheader.