React Email Has a Free Email Template Builder — Here's How to Use It

#email #react #typescript #webdev

HTML emails are stuck in 1999 — tables, inline styles, Outlook hacks. React Email lets you build emails with React components that render to battle-tested HTML.

What Is React Email?

React Email is a collection of high-quality, unstyled components for building emails using React and TypeScript. Write emails like you write web apps.

Quick Start

npx create-email@latest
cd react-email-starter && npm run dev

Building an Email

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

export default function WelcomeEmail({ name, loginUrl }) {
  return (
    <Html>
      <Head />
      <Preview>Welcome to our platform, {name}!</Preview>
      <Body style={main}>
        <Container style={container}>
          <Img src="https://example.com/logo.png" width="120" height="36" alt="Logo" />

          <Text style={heading}>Welcome, {name}!</Text>

          <Text style={paragraph}>
            Thanks for signing up. Click below to get started:
          </Text>

          <Section style={buttonContainer}>
            <Button style={button} href={loginUrl}>
              Go to Dashboard
            </Button>
          </Section>

          <Hr style={hr} />

          <Text style={footer}>
            If you didn't create this account, you can ignore this email.
          </Text>
        </Container>
      </Body>
    </Html>
  );
}

const main = { backgroundColor: '#f6f9fc', fontFamily: '-apple-system, sans-serif' };
const container = { margin: '0 auto', padding: '20px', maxWidth: '560px' };
const heading = { fontSize: '24px', fontWeight: '600', color: '#1a1a2e' };
const paragraph = { fontSize: '16px', lineHeight: '26px', color: '#484848' };
const buttonContainer = { textAlign: 'center', margin: '24px 0' };
const button = { backgroundColor: '#3b82f6', color: '#fff', padding: '12px 24px', borderRadius: '6px', textDecoration: 'none' };
const hr = { borderColor: '#e6ebf1', margin: '20px 0' };
const footer = { fontSize: '12px', color: '#8898aa' };

Available Components

Html, Head, Body — document structure
Container, Section, Row, Column — layout
Text, Heading, Link — typography
Button — call to action
Img — images with alt text
Hr — horizontal rule
Preview — preview text in inbox
Font — custom web fonts
CodeBlock, CodeInline — code display
Markdown — render markdown content

Render to HTML

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

const html = await render(
  <WelcomeEmail name="John" loginUrl="https://app.example.com" />
);

// Send with any email provider
await resend.emails.send({
  from: 'hello@example.com',
  to: 'john@example.com',
  subject: 'Welcome!',
  html,
});

Works With Any Email Provider

Resend — built by the same team
SendGrid — pass HTML directly
Mailgun — pass HTML directly
Amazon SES — pass HTML directly
Postmark — pass HTML directly
Nodemailer — pass HTML directly

Dev Server

npm run dev
# Opens localhost:3000 — live preview of all your email templates
# Hot reload as you edit

Why React Email

	React Email	MJML	Raw HTML
Language	React/TSX	MJML markup	HTML tables
Type safety	Full	None	None
Components	Yes	Yes	No
Preview	Dev server	CLI	Open in browser
Outlook support	Handled	Handled	Manual
Dark mode	Component	Manual	Manual