GuideFeb 10, 20255 min read

Building Beautiful Templates with React Email

Building HTML emails has always been painful. Tables within tables, inline styles everywhere, and the constant battle with Outlook rendering. React Email changes everything by letting you write email templates with the same component model you use for your web app.

Why React Email?

React Email is a collection of high-quality, unstyled components for building emails. It renders to HTML that works across every major email client — Gmail, Outlook, Apple Mail, Yahoo, and more. Combined with Posthawk, you get a complete workflow: write templates in React, preview them with hot reload, and deploy them through the dashboard.

•Component-based: Reuse layouts, headers, footers across templates
•Type-safe: Full TypeScript support with autocomplete for variables
•Responsive: Built-in responsive primitives that work in email clients
•Testable: Preview in the browser before sending to real inboxes

Creating your first template

Templates in Posthawk live in the /templates directory. Each template is a React component that receives variables as props. Here's a welcome email template:

tsx

import {
  Html, Head, Body, Container,
  Section, Text, Button, Hr
} from '@react-email/components';

interface WelcomeEmailProps {
  name: string;
  actionUrl: string;
}

export default function WelcomeEmail({
  name,
  actionUrl,
}: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Body style={body}>
        <Container style={container}>
          <Text style={heading}>
            Welcome, {name}!
          </Text>
          <Text style={paragraph}>
            Thanks for signing up. Click below to
            get started with your account.
          </Text>
          <Button style={button} href={actionUrl}>
            Get Started
          </Button>
          <Hr style={hr} />
          <Text style={footer}>
            Sent with Posthawk
          </Text>
        </Container>
      </Body>
    </Html>
  );
}

const body = { backgroundColor: '#121212' };
const container = { padding: '40px 20px' };
const heading = {
  fontSize: '24px',
  fontWeight: 'bold',
  color: '#f2f2f2',
};
const paragraph = {
  fontSize: '16px',
  color: '#979797',
  lineHeight: '1.6',
};
const button = {
  backgroundColor: '#8262ff',
  color: '#ffffff',
  padding: '12px 24px',
  borderRadius: '8px',
};
const hr = { borderColor: '#2b2b2b' };
const footer = {
  fontSize: '12px',
  color: '#666666',
};

Using variables in your templates

When you send an email through the Posthawk API, you pass a template name and variables. Posthawk renders the React component with those variables and sends the resulting HTML. This means your templates are fully dynamic — personalized content, conditional sections, loops over data — all with standard React patterns.

bash

curl -X POST http://localhost:3001/api/v1/emails/send \
  -H "x-api-key: your-api-key" \
  -H "Content-Type: application/json" \
  -d '{
    "to": "alice@example.com",
    "subject": "Welcome to Acme!",
    "template": "welcome",
    "variables": {
      "name": "Alice",
      "actionUrl": "https://app.acme.com/onboard"
    }
  }'

Hot reload workflow

During development, you can preview your templates in real-time. Run the Posthawk dev server and open the template preview in your browser. Every time you save a template file, the preview updates instantly — no manual refresh needed. This makes iterating on email designs as fast as building a web page.

Once you're happy with a template, deploy it through the Posthawk dashboard or via the API. Templates are versioned, so you can roll back if needed. Your designers can tweak styles and copy without touching the sending logic, and your engineers can wire up new templates without worrying about email client quirks.

Next steps

React Email and Posthawk together give you a modern, developer-friendly email workflow. Start by cloning the Posthawk repo, creating a template in the /templates directory, and sending a test email. The documentation covers advanced patterns like layouts, conditional content, and internationalization. Happy emailing.