React Email

Build beautiful emails with React components using React Email and send them via VeilMail. The @resonia/react-email adapter provides render utilities that integrate with the VeilMail SDK.

Render React Email components to HTML
Dual render: HTML + plain text in one call
Create send-ready payloads for the VeilMail SDK
Type-safe with full TypeScript support
Lightweight — uses @react-email/render as a peer dependency

Installation

# Install the adapter and React Email
npm install @resonia/react-email @react-email/render @react-email/components react react-dom

# Also install the VeilMail SDK
npm install @resonia/veilmail-sdk

Quick Start

1. Create an Email Component

emails/welcome.tsx

import {
  Body,
  Container,
  Head,
  Heading,
  Html,
  Preview,
  Text,
} from '@react-email/components';

interface WelcomeEmailProps {
  name: string;
}

export function WelcomeEmail({ name }: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>Welcome to our platform, {name}!</Preview>
      <Body style={{ backgroundColor: '#f6f9fc', padding: '40px 0' }}>
        <Container style={{ backgroundColor: '#ffffff', padding: '40px', borderRadius: '8px' }}>
          <Heading>Welcome, {name}!</Heading>
          <Text>Thanks for signing up. We're excited to have you on board.</Text>
        </Container>
      </Body>
    </Html>
  );
}

2. Render and Send

send.tsx

import { VeilMail } from '@resonia/veilmail-sdk';
import { createEmail } from '@resonia/react-email';
import { WelcomeEmail } from './emails/welcome';

const client = new VeilMail('veil_live_xxxxx');

// createEmail renders the component and builds the payload
const payload = await createEmail(
  <WelcomeEmail name="John" />,
  {
    from: 'hello@yourdomain.com',
    to: 'john@example.com',
    subject: 'Welcome to our platform!',
  }
);

// Send via the VeilMail SDK
const email = await client.emails.send(payload);
console.log('Sent:', email.id);

API Reference

render(component, options?)

Render a React Email component to an HTML string.

render.tsx

import { render } from '@resonia/react-email';

// Render to HTML
const html = await render(<WelcomeEmail name="John" />);

// Render to plain text
const text = await render(<WelcomeEmail name="John" />, {
  plainText: true,
});

renderDual(component)

Render both HTML and plain text in a single call.

render-dual.tsx

import { renderDual } from '@resonia/react-email';

const { html, text } = await renderDual(<WelcomeEmail name="John" />);

await client.emails.send({
  from: 'hello@yourdomain.com',
  to: 'john@example.com',
  subject: 'Welcome!',
  html,
  text,
});

createEmail(component, params)

Create a complete email payload ready for client.emails.send(). Renders both HTML and plain text and merges with send parameters.

create-email.tsx

import { createEmail } from '@resonia/react-email';

const payload = await createEmail(
  <WelcomeEmail name="John" />,
  {
    from: 'hello@yourdomain.com',
    to: 'john@example.com',
    subject: 'Welcome!',
    replyTo: 'support@yourdomain.com',
    tags: [{ name: 'category', value: 'onboarding' }],
  }
);

// payload contains: from, to, subject, html, text, replyTo, tags
await client.emails.send(payload);

Next.js Integration

Use React Email with VeilMail in a Next.js API route or Server Action:

app/actions/send-welcome.ts

// app/actions/send-welcome.ts
'use server';

import { VeilMail } from '@resonia/veilmail-sdk';
import { createEmail } from '@resonia/react-email';
import { WelcomeEmail } from '@/emails/welcome';

const client = new VeilMail(process.env.VEILMAIL_API_KEY!);

export async function sendWelcomeEmail(name: string, email: string) {
  const payload = await createEmail(
    <WelcomeEmail name={name} />,
    {
      from: 'hello@yourdomain.com',
      to: email,
      subject: `Welcome, ${name}!`,
    }
  );

  return client.emails.send(payload);
}

Install from Source

git clone https://github.com/Resonia-Health/veilmail-react-email.git
npm install ./veilmail-react-email

Requirements

Node.js 18 or later
React 18+ and React DOM
@react-email/render 0.0.12+