---
title: "Email Components and Layouts"
description: "Email component library that works in Outlook, Gmail, and Apple Mail."
url: https://www.unitpost.com/email
section: "Marketing"
updated: 2026-08-21
---
# Email Components and Layouts

> Email component library that works in Outlook, Gmail, and Apple Mail.

MIT. No Unitpost account. No API key. `zod` is a peer (`^4`). Node 18+. Pass the HTML string to any sender.

## Install

Agents (no account):

```bash
npx skills add unitpostcom/email
```

Node:

```bash
npm install @unitpost/email zod
```

## Quick start

Constrained TSX — a small, fixed vocabulary, not a React app. Style with Tailwind-style `className` or `custom-css`; both compile to inline CSS. Unknown tags become an Html block.

```ts
import { parseTsx, renderToHtml, resolveVariables } from "@unitpost/email";

const doc = parseTsx(`
  <Section padding-x={24} padding-y={32}>
    <Heading level={1}>Hi {{first_name}}</Heading>
    <Text>Welcome to {{product_name}}.</Text>
    <Button href="{{cta_url}}">Get started</Button>
  </Section>
`);

const { values, missing } = resolveVariables(doc, {
  first_name: "Ada",
  product_name: "Northwind",
  cta_url: "https://example.com",
});
if (missing.length > 0) throw new Error(`Unresolved: ${missing.join(", ")}`);

const html = renderToHtml(doc, values);
```

Unresolved `{{tokens}}` render literally. Values are HTML-escaped; `javascript:` URLs are dropped.

## Surfaces

- [Component reference](https://www.unitpost.com/components) — props tables and live previews ([Markdown](https://www.unitpost.com/components.md))
- [Pre-built layouts](https://www.unitpost.com/components#layouts) — headers, heroes, CTAs, footers as copyable TSX
- [Playground](https://www.unitpost.com/playground) — render in the browser, no account
- [Template gallery](https://www.unitpost.com/templates/gallery) — ready-to-send transactional and marketing samples ([Markdown](https://www.unitpost.com/templates/gallery.md))
- [GitHub](https://github.com/unitpostcom/email)
- [npm](https://www.npmjs.com/package/@unitpost/email)
- HTML landing: https://www.unitpost.com/email

## FAQ

### What is @unitpost/email?

An MIT-licensed email component library that works in Outlook, Gmail, and Apple Mail. You author constrained TSX (Heading, Text, Button, Section, and the rest of the catalog), call parseTsx then renderToHtml, and pass the HTML string to any sender. No Unitpost account and no API key.

### How do I install the email component library?

For coding agents, run npx skills add unitpostcom/email — that teaches the catalog, parseTsx, renderToHtml, and layouts with no account. For Node, run npm install @unitpost/email zod. zod is a peer dependency (^4); Node 18+.

### Do I need a Unitpost account to use it?

No. The package renders HTML locally and works fully offline. The playground and template gallery are also free without an account. Unitpost can send the HTML if you want a sender; any other API or SMTP relay works too.

### How do I compose and render an email?

Write constrained TSX with catalog tags — not a React app — and optional Tailwind-style className, which compiles to inline CSS. parseTsx returns a document; renderToHtml turns it into the HTML recipients get. {{tokens}} are filled with resolveVariables; unresolved tokens render literally.

### How do I style emails — Tailwind, CSS, or something else?

All of those, as long as they compile. Tailwind-style className on any block (class and tw work too) becomes inline CSS at render; responsive and pseudo variants go in a <style> block. custom-css takes raw CSS declarations and inlines those. Spacing, color, and alignment are also props. Recipients never load a stylesheet — renderToHtml emits the inline CSS Outlook, Gmail, and Apple Mail paint.

### Does it work in Outlook, Gmail, and Apple Mail?

Yes. That is the point of the library: one document, inbox-safe HTML for Outlook, Gmail, and Apple Mail. Live previews on the component reference and the playground use the same renderer as production sends.

### Where are the components, layouts, and examples?

Component props and live previews are at /components. Pre-built bands (headers, heroes, CTAs, footers) are at /components#layouts. Ready-to-send samples are in the template gallery. The playground at /playground renders the same HTML with no install.