Remix & React Email

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

  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.

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

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),
    }
  });
});

React Email

Svelte Email

⌘I