Skip to main content
The React Email CLI provides a complete toolkit for developing, building, and exporting email templates with live preview capabilities.

Installation

Install the CLI as a development dependency in your project:
npm install react-email --save-dev
Or use it directly with npx:
npx react-email dev

Quick Start

Create an emails directory in your project and add your first template:
emails/welcome.tsx
import { Html, Button } from '@react-email/components';

export default function Welcome() {
  return (
    <Html>
      <Button href="https://example.com">Click me</Button>
    </Html>
  );
}
Start the development server:
npx react-email dev
Open your browser to http://localhost:3000 to see the live preview.

Available Commands

The React Email CLI includes the following commands:

dev

Start the development server with live preview and hot reloading

build

Build the preview app for production deployment

export

Export email templates as static HTML files

start

Run the production build of the preview app

Resend Integration Commands

The CLI also includes commands for integrating with Resend:
  • react-email resend setup - Configure Resend API key for CLI integration
  • react-email resend reset - Remove Resend API key from CLI configuration
These commands store your Resend API key locally for use with the React Email CLI features.

Directory Structure

By default, React Email looks for templates in the ./emails directory:
project/
├── emails/
│   ├── welcome.tsx
│   ├── reset-password.tsx
│   └── static/          # Optional: static assets
│       └── logo.png
├── package.json
└── node_modules/
You can customize the directory path using the --dir flag on most commands.

Common Workflows

Development

For active development with live preview:
npx react-email dev

Exporting Templates

To generate production-ready HTML files:
npx react-email export
This creates an out/ directory with your rendered templates.

Production Preview

To build and serve the preview app in production:
npx react-email build
npx react-email start

Next Steps

Development Server

Learn about the dev command and its options

Exporting Templates

Export your templates as HTML for production use

Build docs developers (and LLMs) love