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

Overview

Getting Started

Guides

Components

Utilities

Integrations

Contributing

Editing the components

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

1. Create an email template

2. Run playground server

3. Open in your browser