Render React Email templates and send them with the samva SDK — typed, component-based HTML email.

React Email

React Email lets you build HTML email as React components — typed props, reusable pieces, and Tailwind — instead of hand-written table markup. Render a template to HTML and send it with the samva SDK; Samva is the "samva" entry in the React Email provider matrix.

React Email renders; Samva sends. The two are independent — Samva takes the rendered html (and a text fallback) like any other email.

Render and send

bun add react-email samva

import { render, toPlainText } from "react-email";
import { createClient } from "samva";
import VerifyEmail from "./emails/verify-email";

const samva = createClient({ apiKey: process.env.SAMVA_API_KEY! });

const html = await render(<VerifyEmail url="https://app.example.com/verify?token=abc123" />);

await samva.messages.send({
  to: [{ email: "ada@example.com" }],
  channel: "email",
  email: { subject: "Verify your email", html, text: toPlainText(html) },
});

render is async — await it. toPlainText derives a plain-text fallback from the HTML. There is no from: Samva sends from the verified sender configured on your account.

A Tailwind template

Wrap the email in <Tailwind> and style with utility classes; React Email inlines them into email-safe CSS at render time:

import { Body, Button, Container, Heading, Html, Tailwind, Text } from "react-email";

export const VerifyEmail = ({ url }: { url: string }) => (
  <Tailwind>
    <Html lang="en">
      <Body className="bg-gray-100 py-[40px] font-sans">
        <Container className="mx-auto max-w-[465px] rounded-[12px] bg-white px-[40px] py-[32px]">
          <Heading className="text-[22px] font-bold text-gray-900">Confirm your email</Heading>
          <Text className="text-[15px] text-gray-700">
            Confirm this address to activate your account.
          </Text>
          <Button
            href={url}
            className="rounded-[8px] bg-gray-900 px-[28px] py-[14px] text-white"
          >
            Verify email address
          </Button>
        </Container>
      </Body>
    </Html>
  </Tailwind>
);

Render on the edge

render needs no Node built-ins and the SDK is fetch-based, so you can render and send end-to-end from a Cloudflare Worker, Vercel Edge function, or any edge runtime — no separate build step at runtime.

Preview while you build

With react-email installed, the email CLI previews templates locally and hot-reloads as you edit:

bunx email dev    # live preview at http://localhost:3000

Full cookbook and example

React Email cookbook — the complete walkthrough, including the plain-text fallback and edge rendering.
react-email-samva example — a runnable app with a polished <Tailwind> template and a send script.

React Email

React Email

Render and send

A Tailwind template

Render on the edge

Preview while you build

Full cookbook and example

On this page