Documentación

Plantillas con React Email

Construye plantillas TSX con @react-email/components y usa renderPreview para previsualizar con variables en tiempo real.

1. Instala las dependencias

Añade @react-email/components a tu proyecto. Los componentes son compatibles con Node 18+.

bashbash

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

2. Crea una plantilla TSX

Escribe tu plantilla como un componente React. Usa variables dinámicas como props se sustituirán en el envío.

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. Envía el HTML a CoffeeMail

Renderiza el componente con @react-email/render y haz POST a /v1/product/templates con 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. Renderiza preview

Usa renderPreview para validar visualmente sin enviar útil en el playground del 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. Usa variables en el envío

En el momento del envío, pasa el objeto variables con los valores de las props. Las variables ausentes usan el defaultValue registrado en la plantilla.

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',  },});

El formato react se renderiza del lado del servidor por CoffeeMail a partir del HTML generado por @react-email/render — no hay coste de bundle JS en el correo enviado. El asunto admite Handlebars ({name}) y se interpola en el envío.