Overview

Edge Kit connects email composition, rendering, and delivery so you can send messages from your application's customer flows and background jobs.

React Email lets you build messages from reusable React components. The kit connects those templates to Cloudflare Email Service, with typed variables and localized copy.

Email infrastructure

The shared integration includes:

• Reusable layouts and components for transactional and marketing messages.
• A typed template registry connecting each message to the variables it needs.
• Localized subjects, body text, and links using the app's language setup.
• HTML and plain-text rendering through one sending interface.
• Browser previews for checking content and branding during development.
• Direct delivery from server operations and a queue pattern for delayed messages.

Build product notifications, account messages, or follow-up emails using the same integration. Your templates provide the content; the rendering and delivery connection is already in place.

Templates

We ship a full set of default templates you can customize and use in your app.

These templates demonstrate how to connect a customer event to a branded, translated email. Add your own messages to the same registry, with the variables and language each message needs.

Preview

To preview the templates, run the following command:

pnpm email

The preview will open at http://localhost:3005.

Edit a template and inspect it using its PreviewProps. Those props are preview examples, not production callback URLs. Production auth hooks pass the real URL to the same component.

Reuse the shared layouts for consistent branding, typography, and links. Add new copy to the message catalogs and use the recipient's language when rendering. The verification template demonstrates a translated subject, preview text, button, and copyable link.

The sending guide covers your verified sender and delivery from application operations or background jobs.

Custom templates

1. Create a React template in the transactional or marketing category, following an existing message's shared layout and locale props.
2. Define its variables and add its entry to the typed email registry.
3. Provide a localized subject and body, plus sample values for the preview.
4. Connect the component to the template renderer and check HTML and plain text.
5. Send the message from the authorized server operation or job that triggers it.

The typed registry catches missing variables as you develop. Use React text values and controlled links when rendering customer-provided content.

React Email's component documentation covers email-specific rendering constraints. The kit's adapter and sender configuration are described in sending email.