Remix | Novu Documentation

Quickstart

Before you can start integrating Novu into your application, you need to create a Novu account and set up a new workflow in the Novu Dashboard. This guide walks you through those steps.

Create a Novu account

If you don't have a Novu account, you can create one here.

Create a new Remix application

You can use the following command to create a new Remix application, or use your own and continue from the next step.

npx create-remix@latest

Install the Inbox package

package-install npm install @novu/react

Create the Inbox component

To start using the Inbox component, you need to embed it in your application. Import the <Inbox /> component and pass the applicationIdentifier and subscriberId to the component.

app/components/notification-center.tsx

import React from 'react';
import { Inbox } from '@novu/react';
import { useNavigate } from '@remix-run/react';
 
export function NotificationCenter() {
  const navigate = useNavigate();
  
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriberId="YOUR_SUBSCRIBER_ID"
      routerPush={(path: string) => navigate(path)}
    />
  );
}

Add the Notification Center to your layout

Now you can import the NotificationCenter component and add it to your layout, it will automatically display the Bell icon with notifications.

app/root.tsx

import { NotificationCenter } from "~/components/notification-center";
import type { MetaFunction } from "@remix-run/node";
import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";
 
export const meta: MetaFunction = () => {
  return [
    { title: "New Remix App" },
    { name: "description", content: "Welcome to Remix!" },
  ];
};
 
export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <nav>
          <NotificationCenter />
        </nav>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

Create your first subscriber

Novu will automatically create a subscriber when a new `subscriberId` was detected from the `Inbox` component props.

Start the development server

package-install npm run dev

Trigger your first notification

Now you have setup the Notification Center and created a subscriber, it's time to trigger your first notification workflow.
Visit Dashboard

Get started with Inbox using Novu and Remix

Quickstart

Next steps

Inbox and preferences UI components

Styling

Multi-tenancy

Localization

Environments

On this page