Skip to content

React Email Docs

Jump to bottom
Tahmid Ahmed edited this page Oct 20, 2025 · 3 revisions

Introduction

React Email allows you to create pretty email templates using React JSX.

Development

To preview the development server, you can use

just email-dev

or if you would like to run the dev server manually:

cd email && pnpm email dev

Best Practices

  1. Use this base HTML component:
    <Html
      style={{
        fontFamily:
          "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
      }}
    >
    // your email template here
    </Html>

  1. Use Tailwind instead of style props or CSS files.

  2. All prop input elements must have an id with the following format: input-inputName-target. For example: input-verifyUrl-href or input-verificationCode-text.

Examples:

school-email.tsx

Implementation

Traditionally, React Email requires Node.js (or the web using polyfills) in order to use the render function, which converts the JSX and it's props into an HTML string:

import { MyTemplate } from './email';
import { render, pretty } from '@react-email/render';

const html = await pretty(await render(<MyTemplate />));

console.log(html);

Instead, we use the React Email CLI to export the templates as regular HTML files. These files are then copied into the static directory of our backend, after which the backend will handle the implementation from there (read about it here)

Clone this wiki locally