Skip to main content

​
Overview

Sendi supports React Email — write your emails as React components and Sendi’s SDK renders them to HTML automatically.
React Email is a Pro plan feature. Free plan users will receive a 403 error.

​
How It Works

  1. Install @react-email/render alongside sendi-email
  2. Pass a React component via the react prop in sendi.emails.send()
  3. The SDK renders it to HTML client-side and sends the HTML to the API

​
Setup

npm install sendi-email @react-email/render react

​
Usage

Create a React Email component: 
// emails/welcome.tsx
import { Html, Head, Body, Container, Text } from '@react-email/components';

export function WelcomeEmail({ name }: { name: string }) {
  return (
    <Html>
      <Head />
      <Body style={{ backgroundColor: '#f6f9fc' }}>
        <Container>
          <Text>Welcome, {name}!</Text>
          <Text>Thanks for signing up.</Text>
        </Container>
      </Body>
    </Html>
  );
}
Send it with the SDK: 
import { Sendi } from 'sendi-email';
import { WelcomeEmail } from './emails/welcome';

const sendi = new Sendi('snd_your_api_key');

await sendi.emails.send({
  from: 'you@yourdomain.com',
  to: 'user@example.com',
  subject: 'Welcome!',
  react: <WelcomeEmail name="John" />,
});

​
How Rendering Works

The SDK dynamically imports @react-email/render and converts your JSX to an HTML string before sending it to the Sendi API. The react_email: true flag is set in the request so the API can enforce plan restrictions. If @react-email/render is not installed, the SDK throws a clear error with installation instructions.

​
Plan Restrictions

PlanReact Email
FreeNot available (403)
ProFull access

​
Combining with Other Options

You can use react alongside other send options like cc, bcc, replyTo, attachments, and tags. If you pass both react and html, the rendered React output takes precedence.