> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sendbaze.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React Email

> Write emails as React components and let the SDK render them to HTML and plain text on the way out.

If you would rather build emails from components than from HTML strings or dashboard [templates](https://docs.sendbaze.com/learn/sending/templates.md), pass a React element as `react`. The SDK renders it with [React Email](https://react.email) and sends the result as `html` and `text`.

**1. Install the renderer**

The SDK itself has no dependencies; the renderer is an optional peer dependency you add when you need it.

```bash npm theme={"dark"}
npm install @sendbaze/sdk @react-email/render react react-dom
```

```bash pnpm theme={"dark"}
pnpm add @sendbaze/sdk @react-email/render react react-dom
```

React Email's [components](https://react.email/components) (`@react-email/components`) are optional; plain JSX works too.

**2. Write the email**

```tsx emails/order-shipped.tsx theme={"dark"}
import { Body, Button, Container, Head, Html, Preview, Text } from "@react-email/components";

export function OrderShipped({ name, tracking }: { name: string; tracking: string }) {
  return (
    <Html lang="en">
      <Head />
      <Preview>Your order is on its way</Preview>
      <Body style={{ fontFamily: "sans-serif" }}>
        <Container>
          <Text>Hi {name},</Text>
          <Text>Your order has shipped. Tracking number: {tracking}</Text>
          <Button href={`https://yourshop.co.za/track/${tracking}`}>Track your parcel</Button>
        </Container>
      </Body>
    </Html>
  );
}
```

**3. Send it**

```tsx theme={"dark"}
import { Sendbaze } from "@sendbaze/sdk";
import { OrderShipped } from "./emails/order-shipped";

const sendbaze = new Sendbaze({ apiKey: process.env.SENDBAZE_API_KEY! });

await sendbaze.emails.send({
  from: "Yourshop <orders@yourshop.co.za>",
  to: "thandi@example.com",
  subject: "Your order #1042 has shipped",
  react: <OrderShipped name="Thandi" tracking="CG123456789ZA" />,
  tags: ["order-shipped"],
});
```

`react` works in `emails.batch()` too; every item is rendered before the request is sent.

## What gets sent

* The component is rendered once to **HTML** and once to **plain text** (links and headings preserved), so every email has both parts. Pass your own `text` to keep the HTML render and skip the text one.
* The API receives ordinary `html` and `text`; the element never leaves your server. Nothing about the message changes on the Sendbaze side.
* `react` cannot be combined with `html` or `templateId`. Rendering happens in your process, so rendering errors are thrown by `send()` before any request is made.

## Render without sending

`renderReactEmail` gives you the same output for previews, snapshot tests or storing the HTML in a [template](https://docs.sendbaze.com/learn/sending/templates.md):

```tsx theme={"dark"}
import { renderReactEmail } from "@sendbaze/sdk";

const { html, text } = await renderReactEmail(<OrderShipped name="Thandi" tracking="CG123456789ZA" />);
```

Options: `{ text: false }` skips the plain-text part; `{ pretty: true }` indents the HTML (larger payload, easier to read).

## Runtime notes

* Rendering uses `react-dom/server`, which runs on Node.js 18+, Bun and the Edge runtime. On Next.js, keep the send in a route handler or server action.
* The renderer is loaded on first use with a dynamic import. If it is missing, `send()` throws `Sendbaze: \`react\` needs the optional peer dependency @react-email/render\` with the install command.
* Images referenced from components must be hosted URLs, or [inline attachments](https://docs.sendbaze.com/learn/sending/attachments.md) addressed with `cid:`.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.