React Email

Build emails as React components instead of table layouts, preview them as you work, and send them through SendSend.

React Email is an open-source component library that renders to the HTML email clients need. It works with any provider. SendSend takes the HTML it produces, so there is nothing special to configure.

1. Write a component

// emails/welcome.tsx
import { Html, Body, Heading, Text, Button } from '@react-email/components';

export default function Welcome({ name }: { name: string }) {
  return (
    <Html>
      <Body style={{ fontFamily: 'sans-serif' }}>
        <Heading>Welcome, {name}</Heading>
        <Text>Thanks for signing up.</Text>
        <Button href="https://acme.com/start">Get started</Button>
      </Body>
    </Html>
  );
}

2. Preview it while you build

React Email includes its own preview server. It reloads as you edit and shows desktop and mobile widths, plus the HTML and plain-text output.

npx react-email dev --dir emails

3. Send it

Render the component to HTML and plain text, then send both. This works today with any HTTP client:

import { render } from '@react-email/render';
import Welcome from './emails/welcome';

const element = <Welcome name="Maria" />;

await fetch('https://api.sendsend.email/v1/emails', {
  method: 'POST',
  headers: {
    Authorization: `Bearer ${process.env.SENDSEND_API_KEY}`,
    'Content-Type': 'application/json',
    'Idempotency-Key': crypto.randomUUID(),
  },
  body: JSON.stringify({
    from: 'Acme <hello@mail.acme.com>',
    to: ['maria@example.com'],
    subject: 'Welcome to Acme',
    html: await render(element),
    text: await render(element, { plainText: true }),
  }),
});

With the SendSend SDK

The Node SDK renders for you when you pass a react element. It is not on npm yet; we will announce it in the changelog.

const client = new SendSend({ apiKey: process.env.SENDSEND_API_KEY });

await client.emails.send({
  from: 'Acme <hello@mail.acme.com>',
  to: ['maria@example.com'],
  subject: 'Welcome to Acme',
  react: <Welcome name="Maria" />,
});

It needs @react-email/render and react, which you install yourself. The SDK sends the rendered HTML and a plain-text version, never the component.

Publish a component as a template

If you want to send the same email from other services or languages, publish the component as a template. Put a placeholder wherever a value varies:

import { placeholder } from '@sendsendemail/sdk';

await client.templates.createFromReact({
  id: 'welcome',
  subject: 'Welcome, {{first_name}}',
  variables: { first_name: { type: 'string', required: true } },
  react: <Welcome name={placeholder('first_name')} />,
});

Then send it with template_id and variables from anywhere, as described in Templates. Values are escaped in HTML, so a name cannot inject markup.

Preview a published template

In the dashboard, open Templates and press Preview. Pick a version, fill in sample values and switch between desktop, mobile and plain text. The preview is rendered by our server exactly as a send would be, in a sandbox that cannot run scripts. The same thing is available from the API: Preview a template.

Tip: always send a plain-text part. render(element, { plainText: true }) produces one from the same component.