Documentação

Templates com React Email

Construa templates TSX com @react-email/components e use renderPreview para visualizar com variáveis em tempo real.

1. Instale as dependências

Adicione @react-email/components ao seu projeto. Os componentes são compatíveis com Node 18+.

bashbash

pnpm add @react-email/components @react-email/render

2. Crie um template TSX

Escreva seu template como um componente React. Use variáveis dinâmicas como props elas serão substituídas em tempo de envio.

templates/WelcomeEmail.tsx

import {  Body,  Container,  Head,  Heading,  Html,  Link,  Preview,  Text,} from '@react-email/components'; interface WelcomeEmailProps {  name: string;  activationUrl: string;} export function WelcomeEmail({ name, activationUrl }: WelcomeEmailProps) {  return (    <Html>      <Head />      <Preview>Bem-vindo ao CoffeeMail, {name}!</Preview>      <Body style={{ fontFamily: 'sans-serif', background: '#f6f6f6' }}>        <Container style={{ margin: '40px auto', padding: '20px', background: '#ffffff' }}>          <Heading style={{ color: '#1a1a1a' }}>Olá, {name}!</Heading>          <Text>Sua conta está quase pronta. Clique abaixo para ativar:</Text>          <Link href={activationUrl}>Ativar minha conta</Link>        </Container>      </Body>    </Html>  );}

3. Submeta o HTML à CoffeeMail

Renderize o componente com @react-email/render e envie para POST /v1/product/templates com format=react_email.

compile-and-save.ts

import { render } from '@react-email/render';import { WelcomeEmail } from './templates/WelcomeEmail'; const html = await render(  <WelcomeEmail name="{{ name }}" activationUrl="{{ activationUrl }}" />); const { data } = await coffeemail.templates.create({  name: 'welcome-email',  subject: 'Bem-vindo, {{ name }}!',  html,  format: 'react_email',  variables: [    { name: 'name', type: 'string', required: true },    { name: 'activationUrl', type: 'string', required: true },  ],});console.log('Template criado:', data.id);

4. Renderize preview

Use renderPreview para validar visualmente sem enviar útil no playground do dashboard.

preview.ts

const { data } = await coffeemail.templates.renderPreview({  html: '<p>Olá, {{ name }}! Ative em {{ activationUrl }}</p>',  format: 'html',  variables: { name: 'Maria', activationUrl: 'https://app.seusite.com.br/ativar' },});console.log(data.html);

5. Use variáveis no envio

No momento do envio, passe o objeto variables com os valores das props. Variáveis ausentes são substituídas pelo defaultValue cadastrado no template.

send.ts

await coffeemail.emails.send({  from: 'noreply@seudominio.com.br',  to: 'maria@example.com',  templateId: 'tpl_123',  variables: {    name: 'Maria',    activationUrl: 'https://app.seusite.com.br/ativar?token=xyz',  },});

O format: 'react' é renderizado server-side pela CoffeeMail a partir do HTML gerado por @react-email/render — não há custo de bundle JS no email enviado. O subject aceita Handlebars ({name}) e é interpolado no momento do envio.