Framework guide

Send React Email templates

Why use this

Email HTML is famously miserable to write by hand — nested tables, inline styles, and a different set of bugs in every client. react-email lets you write a component instead, and the YourMail SDK accepts that component directly.

For example

Your welcome email lives in the same repo as your app, in the same language, reviewed in the same pull request.

1. Install

@react-email/render is an optional peer dependency of the SDK — the client itself stays zero-dependency, and you only pull the renderer in if you use this feature.

npm install yourmail @react-email/render @react-email/components

2. Write the template

An ordinary React component. Props are how you pass in the per-recipient detail.

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

export function Welcome({ name }: { name: string }) {
  return (
    <Html>
      <Head />
      <Body style={{ fontFamily: "sans-serif" }}>
        <Container>
          <Heading>Welcome aboard, {name}</Heading>
          <Text>
            Thanks for signing up. Your account is ready to use.
          </Text>
        </Container>
      </Body>
    </Html>
  );
}

3. Pass it to send()

Give the SDK the element and it renders it for you. react and html are mutually exclusive — supply one or the other, never both.

import { YourMail } from "yourmail";
import { Welcome } from "./emails/welcome.js";

const yourmail = new YourMail(process.env.YOURMAIL_API_KEY);

await yourmail.send({
  from: "Acme <hello@mail.acme.com>",
  to: "customer@example.com",
  subject: "Welcome aboard",
  // Pass the element itself — the SDK renders it to HTML for you.
  react: <Welcome name="Alice" />,
  // Worth adding by hand: the renderer produces HTML, and a message with no
  // plain-text part is a mild spam signal.
  text: "Welcome aboard, Alice. Thanks for signing up.",
});

Rendering it yourself

If you need the markup rather than just the send — to assert on it in a test, or to keep a copy of what went out — call the renderer directly and pass the result as html.

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

// Equivalent to passing `react`, but useful when you want the markup itself —
// to snapshot it in a test, or to store a copy of exactly what you sent.
const html = await render(<Welcome name="Alice" />);

await yourmail.send({
  from: "Acme <hello@mail.acme.com>",
  to: "customer@example.com",
  subject: "Welcome aboard",
  html,
});

Two things that catch people out

The file needs to be JSX. Passing react: means writing JSX at the call site, so that file has to be .tsx or .jsx and go through your build — a plain .ts script will not compile it.

Add the text part yourself. The renderer produces HTML only. Nothing derives a plain-text alternative from it, so set text explicitly if you want one — and you do.

Node.js & Express Next: Convex