React Email

React Email is a collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript. It's a great way to build email templates that are consistent with your brand and easy to maintain.

Getting Started

Install React.Email components

npm install @react-email/components react-email

Write your email

import {
    Body,
    Container,
    Head,
    Html,
    render,
} from '@react-email/components';
import * as React from "react";
 
interface TestEmailProps {
    name: string
}
 
export const TestEmailTemplate = ({ name }: TestEmailProps) => {
    return (
        <Html>
            <Head />
            <Body>
                <Container>
                    Hello {name} welcome to your first React E-mail template!
                </Container>
            </Body>
        </Html>
    );
};
 
export default TestEmailTemplate;
 
export function renderEmail(name: string) {
    return render(<TestEmailTemplate name={name} />);
}

Write your workflow

import { workflow } from '@novu/framework';
import { renderEmail } from './emails/test-email';
import { z } from 'zod';
 
export const testWorkflow = workflow('test-workflow', async ({ step, payload }) => {
    await step.email('send-email', async (controls) => {
        return {
            subject: controls.subject,
            body: renderEmail(payload.userName),
        };
    },
    {
        controlSchema: z.object({
            subject: z.string().default('A Successful Test on Novu from {{userName}}'),
        }),
    });
}, {
    payloadSchema: z.object({
        userName: z.string().default('John Doe'),
    }),
});

Getting Started

On this page