Editing the components

To facilitate developing components, use the built-in playground, which automatically hot reloads when you make changes to the components during development.

1. Create an email template

Create a new file at playground/emails/testing.tsx

playground/emails/testing.tsx

import { Html, Head, Body, Tailwind, Text } from 'react-email';

export default function Testing() {
  return <Tailwind>
    <Html>
      <Head/>

      <Body className="bg-black text-white">
        <Text className="m-0 my-4 bg-cyan-200 text-slate-800">
          This is a testing email template.
        </Text>
      </Body>
    </Html>
  </Tailwind>;
}

The .gitignore file will ignore all changes in playground/emails so you can test component changes and use cases in example templates without committing them to the repository.

2. Run playground server

pnpm dev

3. Open in your browser

Go to http://localhost:3000

Writing docs

​1. Create an email template

​2. Run playground server

​3. Open in your browser

1. Create an email template

2. Run playground server

3. Open in your browser