Getting Started
1
Install React.Email components
2
Write your email
3
Write your workflow
Documentation Index
Fetch the complete documentation index at: /llms.txt
Use this file to discover all available pages before exploring further.
Design beautiful, responsive email templates for Novu workflows with React Email components and render them from your Framework email step.
Install React.Email components
npm install @react-email/components react-email
Write your email
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
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'),
}),
});
Was this page helpful?