Remix & React Email | Novu Documentation

Integrating Novu Framework with React email for your Remix application can be done in three steps. If you don't have an app, you can clone our Remix example.

Install React email components

Install the required React email components.

  npm i @react-email/components react-email

Create email templates folder

Create an emails folder in the app directory of your Remix app.

Write your email

Create a new sample-email.tsx file for your email template.

import { Button, Html } from "@react-email/components";
 
function Email(props) {
  return (
    <Html>
      <Button
        href="https://example.com"
        style={{ background: "#000", color: "#fff", padding: "12px 20px" }}
      >
        Click me
      </Button>
    </Html>
  );
}
 
export function renderEmail(inputs) {
  return render(<Email {...inputs} />);
}

Write your workflow

Define your workflow using the above template

import { renderEmail } from './sample-email.tsx';
import { workflow } from '@novu/framework';
 
workflow('new-signup', async ({ step, payload }) => {
  await step.email('send-email', async (inputs) => {
    return {
      subject: `Welcome to Remix and React E-mail`,
      body: renderEmail(inputs),
    }
  });
});