Remix | Novu Documentation

Create an account and learn how to start using Novu notification Inbox in your Remix application.

This guide walks you through integrating Novu’s Inbox into your Remix application for in-app notifications in real-time, from setup to triggering your first notification. By the end, you'll have a working notification inbox.

Create a Novu account

Create a Novu account or sign in to an existing account

Create a Remix application

Create a new Remix app using the command below. Skip this step if you already have an existing project:

npx create-remix@latest

Install Novu’s inbox package

npm install @novu/react

Create an Inbox component

In the app directory, create a components/notification-center.tsx file and use the <Inbox /> component, passing and :

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

If you’re signed in to your Novu account, then the and are automatically entered in the code sample above. Otherwise, you can manually retrieve them:

applicationIdentifier – In the Novu dashboard, click API Keys, and then locate your unique Application Identifier.
subscriberId – This represents a user in your system (typically the user's ID in your database). For quick start purposes, an auto-generated subscriberId is provided for your Dashboard user.

Note: If you pass a subscriberId that does not exist yet, Novu will automatically create a new subscriber with that ID.

Add the Notification Center component to your layout

Now you can import the NotificationCenter component and add it to your app layout:

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

Run Your Application

Start your development server:

npm run dev

Once the application is running, a bell icon will appear in the navbar. Clicking it opens the notification inbox UI.

Currently, there are no notifications. Let’s trigger one!

Trigger your first notification

In this step, you'll create a simple workflow to send your first notification via the Inbox component. Follow these steps to set up and trigger a workflow from your Novu dashboard.

Go to your Novu dashboard.
In the sidebar, click Workflows.
Click Create Workflow. Enter a name for your workflow (e.g., "Welcome Notification").
Click Create Workflow to save it.
Click the Add Step icon in the workflow editor and then select In-App as the step type.
In the In-App template editor, enter the following:
- Subject: "Welcome to Novu"
- Body: "Hello, world! "
Once you’ve added the subject and body, close the editor.
Click Trigger.
Click Test Workflow.

Novu Remix Quickstart Guide

Create a Novu account

Create a Remix application

Install Novu’s inbox package

Create an Inbox component

Add the Notification Center component to your layout

Run Your Application

Trigger your first notification

View the notification in your app

Next steps

Styling

Inbox and preferences UI components

Build Workflow

SDKs

On this page