Introduction
Learn how to send notifications with Remix, React email and Novu. You can check out the complete code for a working app.Prerequisites
- A Novu account
- Node installed on your machine
- A working Remix app
Follow these Steps
1. Install all dependencies including react email components
2. Integrate Novu with Remix
Within theapp/routes
directory, create an api.novu.tsx
file.
3. Create an email template in your Remix app
Within theapp
directory, create an emails
folder and add an email template file to it.
In this scenario, create a vercel-invite-user.tsx
file and the code below to it:
4. Create a Novu Workflow
Next, create a Novu workflow with an email step. This code-first notification workflow approach makes it easy for product teams to modify notification content. Within theapp
directory, create an novu
folder and add a workflows.ts
file to it. Copy/paste the code below to the recently created file.
5. Preview Email Workflow & Sync to Novu Cloud
Open Novu Dev Studio to preview and make changes to the email workflow as needed via the command below:- Run the Studio
Novu Dev Studio on the first run
- Check out the signup email workflow and test

Preview Email workflow with Step Inputs & Payload
- Deploy to Novu Cloud when you’re done.