Sending & Testing

Template emails with React Email

Author email templates as React components with React Email — full TypeScript and Tailwind support and a live preview server — then render them to HTML and send with POST /emails.

With React Email, you write email templates as React components — with full TypeScript and Tailwind support and a local preview server. Preview in real time with hot reload, then render to email-friendly HTML or plain text and send it through MailBlastr with POST /emails.

1
Scaffold a project
Use create-email to generate a starter project with example templates, a preview server, and the @react-email/components package.
2
Write a template
Author each email as a .tsx component, optionally with typed props that become variables at send time.
3
Preview locally
Run the preview server to see your email render with hot reload, plus linter, compatibility, and spam tooling.
4
Render and send
Render the component to HTML and POST it to MailBlastr.

Set up a React Email project

npx create-email@latest

cd react-email-starter
npm install

This creates a react-email-starter folder with an emails/ directory and a few example templates. Already have a project? Follow the React Email manual setup and add an emails/ directory wherever you prefer.

Write your template

Create emails/welcome.tsx. Components are imported from react-email; add props to use as variables when sending.

emails/welcome.tsx

import {
  Body,
  Button,
  Container,
  Head,
  Heading,
  Html,
  Preview,
  Section,
  pixelBasedPreset,
  Tailwind,
  Text,
} from 'react-email';
import * as React from 'react';

interface WelcomeEmailProps {
  firstName?: string;
  productName?: string;
}

export default function WelcomeEmail({
  firstName = 'there',
  productName = 'Acme',
}: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Tailwind config={{ presets: [pixelBasedPreset] }}>
        <Preview>Welcome to {productName}</Preview>
        <Body className="bg-white font-sans">
          <Container className="mx-auto py-12">
            <Heading className="text-2xl font-semibold text-black">
              Welcome, {firstName}
            </Heading>
            <Text className="text-base text-zinc-700">
              Thanks for signing up for {productName}. Let's get you started.
            </Text>
            <Section className="mt-6">
              <Button
                className="rounded-md bg-black px-5 py-3 text-sm font-medium text-white"
                href="https://example.com/get-started"
              >
                Get started
              </Button>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

Preview locally

Add an email:dev script and run the preview server. Open localhost:3000 and pick welcome.tsx from the sidebar. The preview offers desktop/mobile toggles, source HTML, and plain-text output, plus a Linter, a Compatibility check against caniemail, and a Spam checker.

package.json

{
  "scripts": {
    "email:dev": "email dev"
  }
}

Render and send with MailBlastr

Render the component to an HTML string with @react-email/render, then send it with the SDK:

sendEmail.ts

import { render } from '@react-email/render';
import { MailBlastr } from 'mailblastr';
import WelcomeEmail from './emails/welcome';

const mb = new MailBlastr(process.env.MAILBLASTR_API_KEY);

const html = await render(
  WelcomeEmail({ firstName: 'Ada', productName: 'Acme' }),
);

const { data, error } = await mb.emails.send({
  from: 'Acme <hello@yourdomain.com>',
  to: ['delivered@yourdomain.com'],
  subject: 'Welcome to Acme',
  html,
});

const id = data?.id;

Prefer to store templates on MailBlastr and reference them by id — with variables substituted at send time? See the Templates overview, variables, and sending with a template.

To let your users edit templates visually inside your own product, see Embed the React Email editor.