Dev Tools

React Email Preview

The starter kit includes React Email for creating emails with React and TypeScript. React Email also includes a preview server for email templates.

Start the preview server

To preview email templates, run:

Terminal
pnpm --filter email preview
React Email Preview

Add a new preview template

When you create a new email template, add also a new file for the preview. For example packages/email/templates/previews/my-email-template.tsx would look like the following:

packages/email/templates/previews/my-email-template.tsx
import * as React from 'react';

import { MyEmailTemplate } from '../my-email-template';

export default function MyEmailTemplatePreview(): React.JSX.Element {
  return (
    <MyEmailTemplate
      appName="Acme"
      name="John Doe"
    />
  );
}