_Email.md_

Frontmatter

Override theme values and set metadata per-email using YAML frontmatter.

Add a YAML frontmatter block at the top of your markdown to override theme values and set metadata per-email:

---
preheader: "Don't miss our biggest sale"
brand_color: "#e11d48"
button_color: "#059669"
---

# Sale Starts Now

Everything is 50% off this weekend.

::: footer
**Acme Corp** · [Unsubscribe](https://example.com/unsub)
:::

Frontmatter uses snake_case keys. They map directly to the same theme options available in the JS API (which uses camelCase).

Preheader

The preheader field sets the preview text that email clients show in the inbox list next to the subject line. It's hidden in the email body itself:

---
preheader: "Your order has shipped — track it now"
---

Selecting a Theme

Use theme to switch the base theme for a single email. Individual overrides still layer on top:

---
theme: dark
brand_color: "#e11d48"
---

# Dark email with a custom brand color

Valid values: light (default), dark.

All Frontmatter Keys

KeyDescription
preheaderInbox preview text (hidden in email body)
themeBase theme — light or dark
brand_colorLinks, highlights, accents
heading_colorHeading text color
body_colorBody text color
background_colorOuter background color
content_colorContent area background
card_colorCallout / code block background
button_colorPrimary button background
button_text_colorButton text color
font_familyFont stack
font_sizeBase font size
line_heightBase line height
content_widthEmail content width

Custom Metadata

Any keys beyond the ones above are passed through in the meta object returned by render(). This is useful for storing email metadata alongside the template:

---
preheader: "Welcome aboard"
subject: "Welcome to Acme"
campaign_id: "onboarding-v2"
---

# Welcome!
const { html, text, meta } = render(markdown);

console.log(meta.subject);     // "Welcome to Acme"
console.log(meta.campaign_id); // "onboarding-v2"
console.log(meta.preheader);   // "Welcome aboard"

On this page