React Email

16. February, 2025 • 3 min read • Develop

Building Emails the React Way

Email development has long been a pain point for developers, plagued by inconsistent rendering across clients and outdated tooling. React Email brings the power of React and TypeScript to email templates, offering a modern, component-based approach to crafting emails.

In this post, we’ll explore how React Email simplifies email development, how to set it up, test your templates, and integrate with AWS Simple Email Service (SES) for sending emails.

Why React Email?

React Email is an open-source library that allows developers to build emails using familiar React components. It addresses common challenges in email development:

Component-Based Architecture: Build reusable components for headers, footers, buttons, and more.
Type Safety: Leverage TypeScript for safer and more predictable code.
Live Preview: Instantly preview your emails in the browser during development.
Framework Agnostic: Use with any backend or email service provider.

By using React Email, you can create maintainable and consistent email templates that render correctly across various email clients.

Setting Up React Email

To get started with React Email, follow these steps:

1. Install Dependencies:

npm install react-email @react-email/components

2. Create an Email Template:

// emails/WelcomeEmail.tsx
import * as React from 'react';
import {
  Html,
  Head,
  Preview,
  Body,
  Container,
  Text,
  Button,
} from '@react-email/components';

export default function WelcomeEmail() {
  return (
    <Html>
      <Head />
      <Preview>Welcome to Our Service</Preview>
      <Body>
        <Container>
          <Text>Hello, and welcome!</Text>
          <Button href="https://example.com">Get Started</Button>
        </Container>
      </Body>
    </Html>
  );
}

3. Preview in Browser:

React Email provides a development server to preview your emails:

npm run email:dev

Then, navigate to http://localhost:3000 to see your email rendered in the browser.

Testing Email Templates

Testing your email templates ensures they render correctly and behave as expected. React Email integrates with testing libraries like Vitest:

Install Vitest:

npm install --save-dev vitest

Write Tests:

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

test('renders welcome email correctly', () => {
  const html = render(<WelcomeEmail />);

  expect(html).toContain('Welcome to Our Service');
});

Run Tests:

npx vitest

This setup allows you to catch issues early and maintain high-quality email templates.

Integrating with AWS SES

To send emails using AWS SES, follow these steps:

Install AWS SDK:

npm install @aws-sdk/client-ses

Configure AWS SES:

// sendEmail.ts
import { SESClient, SendEmailCommand } from '@aws-sdk/client-ses';
import { render } from '@react-email/render';
import WelcomeEmail from './emails/WelcomeEmail';

const ses = new SESClient({ region: 'us-east-1' });

const sendEmail = async () => {
  const html = render(<WelcomeEmail />);
  const params = {
    Source: 'you@example.com',
    Destination: { ToAddresses: ['recipient@example.com'] },
    Message: {
      Subject: { Data: 'Welcome!', Charset: 'UTF-8' },
      Body: { Html: { Data: html, Charset: 'UTF-8' } },
    },
  };
  const command = new SendEmailCommand(params);

  await ses.send(command);
};

sendEmail();

Set AWS Credentials:

Ensure your AWS credentials are configured, either via environment variables or the AWS credentials file.

By integrating React Email with AWS SES, you can programmatically send well-designed emails directly from your application.

Conclusion

React Email revolutionizes email development by bringing modern web development practices to email templates. Its component-based architecture, type safety, and seamless integration with services like AWS SES make it a powerful tool for developers.

Whether you’re sending transactional emails, newsletters, or notifications, React Email provides the flexibility and reliability needed to create effective email communications.

‘Till next time!