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/components';

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