Production-ready

Email Components and Layouts

Add to a project.

npm i @unitpost/email zodnpm install @unitpost/email zod

works inOutlook,Gmail,Apple Mailand other.

Welcome

Payment receipt

Newsletter

Explore 20+ more templates

Transactional and Marketing

Quick start

Install, compose, render

Three steps from a blank project to inbox-safe HTML. No account.

Install

Add the package. zod is a peer. Or teach your agent with a skill in seconds.

Terminal

npm install @unitpost/email zod
npx skills add unitpostcom/email

Compose

Write TSX with library components. Tailwind className compiles to inline CSS.

email.tsx

import { parseTsx } from "@unitpost/email";

const tsx = `
  <Heading className="text-2xl font-semibold">Welcome</Heading>
  <p>You're in.</p>
  <Button className="bg-black text-white" href="https://example.com">
    Get started
  </Button>
`;

const doc = parseTsx(tsx);

Render

Same HTML the playground shows. Pass the string to any sender or email client.

render.ts

import { renderToHtml } from "@unitpost/email";

const html = renderToHtml(doc);

Clients

Works in Outlook, Gmail, Apple Mail and other

MIT. Table layout, inline CSS. Render HTML and send it from anywhere — the same markup the playground shows.

Outlook
Gmail
Apple Mail
Yahoo Mail
and other

Library

Components, layouts, HTML you can send

Author in constrained TSX, style with Tailwind or CSS, drop in a pre-built band, render inbox-safe markup. Use it with any sender — this package does not send mail.

Components

Heading, Text, Button, Image, Row, Section — a small catalog with full prop tables. Tailwind-style className or CSS compiles to inline styles.

Layouts

Headers, heroes, CTAs, and footers you paste and edit instead of inventing structure. Same renderer as the gallery.

Any sender

MIT. parseTsx → renderToHtml → your stack. No account, no API key. The playground is the same pipeline.

Components

Read Docs

Heading

Text

Button

Image

Section

Spacer

Divider

Row

Column

Link

Markdown

Code

Html

Playground

CodeValid

<Image src="https://www.unitpost.com/web-app-manifest-192x192.png" alt="{{product_name}}" width={48} align="center" margin-bottom={16} /> <Spacer height={24} /> <Heading level={1} align="center" color="#18181b" margin-bottom={16}> Welcome aboard, {{first_name}} 👋 </Heading> <Text align="center" color="#3f3f46" font-size={16} margin-bottom={16}> Thanks for joining {{product_name}}. Your account is ready — let's get you to your first win in just a couple of minutes. </Text> <Spacer height={24} /> <Button href="{{get_started_url}}" align="center" background-color="#18181b" text-color="#ffffff" border-radius={9999} inner-padding-x={34} inner-padding-y={14} margin-bottom={16}> Get started </Button> <Spacer height={32} /> <Section background-color="#fafafa" padding-x={28} padding-y={28} border-radius={12}> <Heading level={3} align="center" color="#18181b" margin-bottom={16}> Three quick steps to get value fast </Heading> <Markdown align="left" color="#3f3f46" font-size={15} margin-bottom={16}> **1. Set up your profile** — add the details that personalize your experience. **2. Connect your first integration** — bring your data in so things just work. **3. Invite your team** — {{product_name}} is better together. </Markdown> </Section> <Spacer height={28} /> <Divider color="#e4e4e7" margin-bottom={16} /> <Spacer height={16} /> <Text align="center" color="#71717a" font-size={14} margin-bottom={16}> Need a hand? Just reply to this email — a real human will get back to you. </Text>

<Image src="https://www.unitpost.com/web-app-manifest-192x192.png" alt="{{product_name}}" width={48} align="center" margin-bottom={16} />
<Spacer height={24} />
<Heading level={1} align="center" color="#18181b" margin-bottom={16}>
  Welcome aboard, {{first_name}} 👋
</Heading>
<Text align="center" color="#3f3f46" font-size={16} margin-bottom={16}>
  Thanks for joining {{product_name}}. Your account is ready — let's get you to your first win in just a couple of minutes.
</Text>
<Spacer height={24} />
<Button href="{{get_started_url}}" align="center" background-color="#18181b" text-color="#ffffff" border-radius={9999} inner-padding-x={34} inner-padding-y={14} margin-bottom={16}>
  Get started
</Button>
<Spacer height={32} />
<Section background-color="#fafafa" padding-x={28} padding-y={28} border-radius={12}>
  <Heading level={3} align="center" color="#18181b" margin-bottom={16}>
    Three quick steps to get value fast
  </Heading>
  <Markdown align="left" color="#3f3f46" font-size={15} margin-bottom={16}>
    **1. Set up your profile** — add the details that personalize your experience.
    
    **2. Connect your first integration** — bring your data in so things just work.
    
    **3. Invite your team** — {{product_name}} is better together.
  </Markdown>
</Section>
<Spacer height={28} />
<Divider color="#e4e4e7" margin-bottom={16} />
<Spacer height={16} />
<Text align="center" color="#71717a" font-size={14} margin-bottom={16}>
  Need a hand? Just reply to this email — a real human will get back to you.
</Text>

Write email code and see the exact HTML the send engine produces — live in your browser, nothing to install.

Open playground

Open Playground

Questions

Common questions

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.

Unitpost

Start sending for free

$0/ mo

5,000 emails / mo — no credit card
Your domain with DKIM, SPF & DMARC
REST API, SMTP & official SDKs
Visual editor + code templates
Open & click tracking + signed webhooks
10,000 contacts · automatic suppression

Start sending free