.nv-snippet-window-wrapper.terminal-cqc4oo {
    position: absolute;
    font-size: .875rem;
    font-family: var(--nv-monospace-font)
}

.nv-snippet-window-wrapper.is-noninteractable.terminal-cqc4oo {
    opacity: 1;
    -webkit-user-select: none;
    user-select: none;
    -moz-user-select: -moz-none;
    transition: opacity .1s ease, filter .1s ease
}

.nv-snippet-window-wrapper.is-noninteractable.terminal-cqc4oo:hover {
    opacity: .3;
    filter: blur(2px)
}

.is-selectable.terminal-10kv6jm .nv-completion-item.terminal-10kv6jm:hover {
    background: var(--nv-bg-light) !important
}

#nv-terminal {
    position: relative;
    width: 100%;
    height: 600px;
    max-width: 700px;
    box-shadow: 0 4px 8px -2px #0f111a29, 0 10px 15px -4px #0f111a29, 0 30px 32px -15px #0f111a29, 0 60px 64px -25px #0f111a29
}

#nv-terminal.terminal-1dfudv>.nv-code-content.terminal-1dfudv .line {
    min-width: 60ch
}

.nv-terminal-tabs.terminal-1dfudv.terminal-1dfudv {
    display: flex;
    border-radius: 8px 8px 0 0;
    padding: 0 4px;
    border-bottom: 1px solid #444
}

button.nv-terminal-tab.terminal-1dfudv.terminal-1dfudv {
    position: relative;
    font-family: inherit;
    border: 0;
    background: none;
    color: #99a;
    font-size: 1rem;
    padding: .5rem .75rem
}

button.nv-terminal-tab.is-active.terminal-1dfudv.terminal-1dfudv {
    color: #dde
}

button.nv-terminal-tab.is-active.terminal-1dfudv.terminal-1dfudv:after {
    position: absolute;
    top: 0;
    bottom: -1px;
    left: calc(.75rem - 2px);
    right: calc(.75rem - 2px);
    content: "";
    border-bottom: 1px solid #ffffff7f
}

button.nv-terminal-tab.terminal-1dfudv.terminal-1dfudv:hover {
    color: #dde
}


@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

.nv-code {
  display: flex;
  flex-direction: column;
  --nv-color: #f9fafc;
  --nv-monospace-font: 'Source Code Pro', 'Monaco', 'Consolas', monospace;
  --nv-bg: #27292e;
  --nv-bg-light: #373a3f;
  --nv-border-color: rgb(73, 76, 95);
  width: 100%;
  font-size: 0.875rem;
  font-family: var(--nv-monospace-font);
  line-height: 1.35;
  color: var(--nv-color);
  border: 1px solid #555;
  background: var(--nv-bg);
  border-radius: 8px;
  box-shadow: 0px 1px 3px 1px rgba(17, 19, 33, 0.4);
}

.nv-code kw {
  color: rgb(255 225 77);
}
.nv-code fn {
  color: rgb(255 51 222);
}
.nv-code str {
  color: rgb(0 213 255);
}
.nv-code id {
  color: #ffcc4a;
}
.nv-code sp {
  color: #6fedb7;
}
.nv-code const {
  color: #b486fd;
}
.nv-code comment {
  color: #8f9397;
}

.nv-code .nv-code-content {
  padding: 0.75rem;
  overflow: auto;
  flex: 1;
}

.nv-code .line {
  display: block;
  font-family: var(--nv-monospace-font);
  margin: 0;
  white-space: pre;
}

.nv-code .line-number {
  display: inline-block;
  font-family: var(--nv-monospace-font);
  width: 2ch;
  text-align: right;
  margin-right: 1ch;
  opacity: 0.5;
  user-select: none;
}

.nv-code .nv-completion-heading {
  padding: 0.25rem 0.5rem;
  border-radius: 5px;
  background: var(--nv-bg-light);
}

.nv-code .nv-completion-items {
  padding: 0.25rem 0;
}

.nv-code .nv-completion-item {
  padding: 0.25rem 0.5rem;
  white-space: pre-wrap;
}

.nv-code .nv-completion-item.is-active {
  background-color: var(--nv-bg-light);
}

.nv-code .nv-completion-icon {
  display: inline-block;
  vertical-align: middle;
  margin: -0.25rem 0;
}

.nv-code .nv-completion-description {
  padding: 0.5rem 0.5rem;
  border-top: 1px solid var(--nv-border-color);
}

.nv-code .nv-cursor {
  font-family: var(--nv-monospace-font);
  color: white;
  position: absolute;
  transform: translateX(-45%);
  font-size: 0.875rem;
  animation: nv-cursor-blinker 1s step-start infinite;
}

.nv-code .nv-cursor::before {
  content: '│';
}

.nv-code span.hover {
  background-color: var(--nv-bg-light);
  outline: 1px solid #aac;
}

.nv-code span.hover.is-active {
  background-color: var(--nv-bg);
}

.nv-code .nv-snippet-window {
  font-size: 0.875rem;
  font-family: var(--nv-monospace-font);
  display: block;
  background-color: var(--nv-bg);
  border: 1px solid var(--nv-border-color);
  border-radius: 5px;
  min-width: 20ch;
  max-width: 50ch;
  whitespace: pre-wrap;
  overflow-wrap: break-word;
  box-shadow: 0px 1px 2px 1px rgba(17, 19, 33, 0.3);
}

.nv-code .nv-snippet-window.is-pop {
  animation: nv-snippet-window-pop-in 0.3s forwards ease;
}
.nv-code .nv-snippet-window-wrapper hr {
  box-sizing: content-box;
  height: 0;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  border-color: var(--nv-color);
}

@keyframes nv-snippet-window-pop-in {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  70% {
    transform: scale(1.05);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes nv-cursor-blinker {
  50% {
    opacity: 0;
  }
}


_linkedin_partner_id = "5915650";
window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];
window._linkedin_data_partner_ids.push(_linkedin_partner_id);


(function (w, d, s, l, i) {
  w[l] = w[l] || [];
  w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
  var f = d.getElementsByTagName(s)[0],
    j = d.createElement(s),
    dl = l != "dataLayer" ? "&l=" + l : "";
  j.async = true;
  j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
  f.parentNode.insertBefore(j, f);
})(window, document, "script", "dataLayer", "GTM-KXMC4XP2");


Installation

Authorization

Novu

Platform

<Inbox />

Framework

Community

API Reference

Get Started

Blog

Contact us

v0.x

Novu’s Angular library provides an Angular component wrapper over the Notification Center Web that you can use to integrate the notification center into your Angular application. 

Angular Component Library

What is Novu?

Learn how to quickly get started with Novu.

Quickstart

Extend Novu by optionally building workflows with Novu Framework.

Introduction

Next.js

How to send notifications with Next.js and Novu Framework

Express.js

How to send notifications with Express.js and Novu Framework

Remix

How to send notifications with Remix and Novu Framework

NestJS

How to send notifications with NestJS and Novu Framework

Svelte

How to send notifications with Svelte and Novu Framework

Nuxt

How to send notifications with Nuxt and Novu Framework

How to send notifications with H3 and Novu Framework

AWS Lambda

How to send notifications with AWS Lambda and Novu Framework

Local Studio

Bridge Endpoint

Controls

Learn what workflows are and how they work in Novu

Workflows

Learn about what Novu Notifications are, their structure, and functionality

Notifications

Managing Trigger Events from Request to Processing

Trigger

Subscribers

Learn how to customize and extend any aspect of the Novu platform using the Framework SDK powered bridge endpoint.

Framework Endpoint

Environments

Preferences

Topics

Learn about how to implement multi-tenant notifications in Novu

Multi-tenancy

Integrations

The workflow Editor combines no-code simplicity and code-based flexibility, enabling users to design and manage advanced notification workflows tailored to their needs.

Overview

Workflow Editor Overview

Build a workflow

Build a Workflow

Learn how to use the Novu notification template editor to design notifications

Template Editor

Digest action

Collect Multiple Events to a Single Message with the Digest Engine

Delay Action

Delay Action Step

The Custom action step in Novu enables dynamic workflows with custom logic, state management, and API or database integration.

Custom action

Custom action step

Learn how to use tags to personalize notifications in Novu

Tags: Organizing Your Notifications

Step Conditions in Novu enable personalized and dynamic workflows by customizing steps based on subscriber data, topics, or behavior, with flexibility across step, channel, and preference levels.

Step Conditions

Step Conditions (Coming Soon)

Channel Steps

Learn how to configure the in-app channel

Learn how to add the In-App channel to your application

Adding In-App Channel

Learn how to add the Email channel to your application

Adding Email Channel

Learn how to add the SMS channel to your application

Adding SMS Channel

Learn how to add the push channel to your application

Adding push channel

Adding Push Channel

Learn the process of configuring and using chat providers with Novu

Learn how to add the Chat channel to your application

Adding Chat Channel

Inbox Overview

Learn how to add a Novu-Powered In-App Inbox to your React app

React Get Started

Learn how to style the pre built Inbox component

Styling

Styling the Inbox component

Tabs

Configuring Multiple Tabs

<Bell />

<Notifications />

<Preferences />

<InboxContent />

Create Custom Inbox UI with React Hooks

NovuProvider

useNotifications

usePreferences

useCounts

useNovu

Learn how to localize the pre built Inbox component

Localization

Localizing the Inbox component

Learn how to prepare your inbox before going to production

Going to production

This guide outlines the key differences between the `@novu/notification-center` package and the new `@novu/react` package. Follow the steps below to migrate your application to the latest version.

Migration Guide

A lightweight, standalone package for building custom in-app notification interfaces with Novu, providing essential functionalities and flexibility.

Headless Inbox

Headless Inbox API Reference

Learn how to add Novu powered Inbox to your React Native app

React Native Get Started

Digest Action for Framework Based Workflows

Used to execute any custom code as a step in the workflow.

Custom Action

Learn how to configure the In-App channel

In-App Channel

Email Channel

Push Channel

SMS Channel

Chat Channel

Syncing your local changes to the Novu Cloud Dashboard

Going to Production

GitHub Actions

Get started and get involved with the Novu Project

Community Overview

Understand the difference between Novu Project and Novu Cloud

Novu Project and Novu Cloud

Self-hosting Novu provides full control and flexibility over your notification infrastructure, with specific system requirements for optimal performance across VMs, Redis, MongoDB, and S3 storage.

Deploy with Docker

Telemetry

The set of rules and guidelines that govern interaction among community members

Code of Conduct

Novu Community Code of conduct

Your guide for engaging with the Novu Community

Get Involved

Get involved with the Novu Community

See the most recent changes and learn about how to shape Novu's future

Changelog

Roadmap

Learn how to configure your local machine to run Novu

MacOS/Linux

Learn how to configure your local Windows machine to run Novu

Windows

Prerequisites and steps to run Novu in local machine. Learn how to set up Novu on your local environment for testing and development.

Run Novu in local machine

Learn how to enable/disable specific features in Novu

Feature Flags

Monorepo Structure

Add a New Provider

Add a new provider

Client

Workflow

Workflow Interface

Step interface

Email

Email Channel Step

In-App

In-App Channel Step

SMS Channel Step

Push

Push Channel Step

Chat

Chat Channel Step

Digest

Digest Action Step

Delay

Custom

Custom Action Step

NodeJS SDK

PHP SDK

Laravel SDK

Python SDK

Kotlin SDK

Java SDK

Ruby SDK

Go SDK

C#/.NET

Novu supports advanced user authentication capabilities like OAuth, SSO, MFA and more, providing enterprise customers with a robust, secure, and user-friendly authentication solution.

Authentication

Learn how to enable Single Sign-On (SSO) for your account.

SAML SSO

Single Sign-On (SSO) for your account

Manage your billing and payment information, view invoices, and upgrade your subscription plan.

Billing

Billing and Payments

You shouldn't have to reinvent the wheel. Here we share how to implement several real-world use cases of notifications workflows.

Common Notification Workflow Examples

Send OTPs without setting up your own infrastructure

OTP (One-Time Password)

Help users reclaim access to their account via the 'Password Reset' or 'Forgot Username' functions

Get started

Concepts

Build workflows

Channels

SDKs

Account

Additional Resources

Angular Component Library

Installation

Get started

Concepts

Build workflows

Channels

SDKs

Account

Additional Resources

​Installation

Installation