Component library

Introduction

A small set of cross-client-tested components for building email.

The Unitpost component library is a constrained set of building blocks for email — layout, typography, media, and interactive elements — designed so the same document renders pixel-for-pixel in every inbox, Outlook included. Under the hood each component compiles to the table-based, inline-styled HTML that email clients actually respect, so you never touch archaic markup yourself.

Everything on this page is powered by the `@unitpost/email` package — the exact renderer the send engine uses. Author your email visually in the template editor, or in code using the constrained TSX dialect below; both produce the same document, and the preview you see here is the email your recipients get.

Insert dynamic data anywhere with `{{variable}}` — it's substituted at send time from the values you pass to the API, a contact's fields, or a campaign default.

Installation

Add the package and render your first email in a few minutes.

You don't need to install anything to use the components in the in-app editor — open any template, switch to Code mode, and start composing. To render or send emails from your own codebase, add the package below.

1. Install the package

Install `@unitpost/email` — it ships the component types, the parser, and the same `renderToHtml` renderer the send engine uses.

# npm
npm install @unitpost/email

# pnpm
pnpm add @unitpost/email

# yarn
yarn add @unitpost/email

# Requires Node.js 18+.

2. Write an email template

Compose a document from the components. In the editor's Code mode you write just the body markup; in your own code you build the same document and hand it to the renderer.

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

// The same constrained TSX you'd write in the editor's Code mode.
const doc = parseTsx(`
  <Section padding-y={32}>
    <Heading level={1}>Welcome, {{first_name}}</Heading>
    <Text>Thanks for joining. Confirm your email to get started.</Text>
    <Button href="https://example.com/verify?token={{token}}">
      Verify email
    </Button>
  </Section>
`);

// Fill {{variables}} and render to email-safe HTML.
const { values } = resolveVariables(doc, {
  first_name: "Ada",
  token: "abc123",
});
const html = renderToHtml(doc, values);

3. Send it

Save the template in your workspace and reference it when you send, or pass the rendered HTML directly. Both go through the same delivery pipeline — see the API reference for the full send surface.

curl https://api.unitpost.com/api/v1/emails \
  -H "Authorization: Bearer $UNITPOST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "from": "you@yourdomain.com",
    "to": "ada@example.com",
    "subject": "Welcome, {{first_name}}",
    "template_id": "tmpl_...",
    "variables": { "first_name": "Ada", "token": "abc123" }
  }'

4. Next steps

Explore the components below — start with Section and Row for layout, then Heading, Text, and Button for content. Every block also accepts the common props.