Start free

Developer documentation

Send React Email templates

Render a React Email component to HTML on your server and send it through the SendPanda API, with a plain-text fallback.

React Email lets you build templates as components. SendPanda sends the HTML you give it, so the pattern is: render the component on your server, then pass the result to emails.send.

1. Install

npm install @sendpanda/sdk @react-email/render react

Create a Send emails key in your project and keep it in your server environment as SENDPANDA_API_KEY. Never put it in browser code or a NEXT_PUBLIC_ variable. You also need a verified sending domain: see the domain setup guide.

2. Render and send

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

const panda = new SendPanda(process.env.SENDPANDA_API_KEY!);

const html = await render(<Welcome name="Alex" />);

await panda.emails.send(
  {
    from: "Your app <hello@your-verified-domain.com>",
    to: ["alex@example.com"],
    subject: "Welcome, Alex",
    html,
    text: "Welcome, Alex. Your account is ready.",
  },
  { idempotencyKey: "welcome-user-123" },
);

Only render components you trust and pass data you have escaped or validated. Include a plain-text text version: some clients and spam filters prefer messages that have one.

Preview before you send

Paste the rendered HTML into the HTML email previewer to check desktop and mobile widths in your browser, then test important layouts in real email clients. If you would rather design visually, SendPanda also has a visual editor and template sends that take template_id and variables instead of html.

Next steps