PristineSend
Get started
Documentation
Guides

React Email

Design your emails as React components and send them in a single call. The SDK's react: convenience renders your component to a polished HTML body and a plaintext alternative, then sends both as one multipart/alternative message.

Overview

React Email gives you composable, type-safe components that render to email-client-safe HTML. PristineSend's SDK accepts a React element directly on send / sendBatch — no separate render step, and the recipient gets a proper html + text message for the best inbox placement.

Install

Add the SDK plus React Email. @react-email/render is an optional peer of the SDK — it's only needed when you use react:, and is imported lazily.

npm install pristinesend react @react"color:#ff7b72">-email/components @react"color:#ff7b72">-email/render

Build a template

A template is just a React component that returns React Email elements. Props are your merge fields:

// emails/welcome.tsx
"color:#ff7b72">import { Html, Head, Body, Container, Heading, Text, Button } "color:#ff7b72">from "@react-email/components"

"color:#ff7b72">export "color:#ff7b72">function WelcomeEmail({ name }: { name: string }) {
  "color:#ff7b72">return (
    <Html>
      <Head />
      <Body style={{ backgroundColor: "#f6f6f6", fontFamily: "sans-serif" }}>
        <Container style={{ padding: 24 }}>
          <Heading>Welcome, {name} 👋</Heading>
          <Text>Thanks for joining Acme. Let's get you set up.</Text>
          <Button
            href="https://acme.com/start"
            style={{ background: "#0066FF", color: "#fff", padding: "12px 20px", borderRadius: 8 }}
          >
            Get started
          </Button>
        </Container>
      </Body>
    </Html>
  )
}

Send it in one call

Pass the element on react:. Because the value is a React element, call send from a .tsx/.jsx file (or use React.createElement).

// send-welcome.tsx
"color:#ff7b72">import { PristineSend } "color:#ff7b72">from "pristinesend"
"color:#ff7b72">import { WelcomeEmail } "color:#ff7b72">from "./emails/welcome"

"color:#ff7b72">const ps = "color:#ff7b72">new PristineSend(process.env.PRISTINESEND_API_KEY!)

"color:#ff7b72">await ps.emails.send({
  to: "jane@example.com",
  "color:#ff7b72">from: "hello@yourdomain.com",
  subject: "Welcome to Acme",
  react: <WelcomeEmail name="Jane" />,
})

Multipart html + text

The SDK renders your component twice — once to HTML, and best-effort to plaintext (React Email's render(el, { plainText: true })) — and sends a multipart/alternative message with both. Plenty of spam filters penalize html-only mail, so this matters for deliverability. If the installed renderer can't produce plaintext, the SDK falls back to html-only rather than failing.

Need exact control of the text part? Pass text: and it overrides the generated plaintext:

"color:#ff7b72">await ps.emails.send({
  to: "jane@example.com",
  "color:#ff7b72">from: "hello@yourdomain.com",
  subject: "Welcome to Acme",
  react: <WelcomeEmail name="Jane" />,
  // Optional: override the auto-generated plaintext alternative.
  text: "Welcome, Jane! Get started: https://acme.com/start",
})

Next steps