Building rich, smooth, and customizable multi-channel notification experiences that are delivered the right way is difficult. Scaling them across teams and organizations makes it even harder.

At Novu, we empower developers with best-in-class notification tools and infrastructure to make managing notifications a walk-in-the-park when developing apps or any form of digital system.

Why a code-first notification workflow approach?

These are the current challenges developers face in managing notification workflows:

• ClickOps, not GitOps. Currently, developers are limited to building notification workflows solely through the user interface (UI) and API. While these methods serve their purpose adequately, they come with some drawbacks. Not only are they time-consuming, but they also disrupt the development flow.
• External Frameworks. It’s inherently difficult and sometimes impossible to integrate notification workflows with external content frameworks. There are tons of tools out there that simplify notification content creation.
• Debugging. Debugging notification content issues in a UI or via API can be time-consuming.
• Limited Customization. Immense limitation of notification steps customization and lack of control. Developers yearn for the ability to control the before and after of certain actions and events in their apps. The if this, then that approach is not readily available in a UI-first notification workflow.
• Huge barrier for non-technical users. Developers rarely work in silos. They work together with marketing, product, sales and other departments to build, manage and sell software. Currently, non-technical users depend on them for the slightest modifications and changes to the notification experience. It’s time-consuming and not scalable!

The power of code-first notification workflows

The code-first notification workflow approach empowers you as a developer to build advanced workflows with code while giving your non-technical teammates full control over content and behaviour.

Everyone wants to be great at something – a great friend, a great partner, a great footballer, a great chef, a great colleague. Novu’s advanced code-first workflow (currently known as Novu Echo) makes you a great developer and teammate by arming you with incredible power to do the following:

• Integration of content frameworks and templating libraries such as React Email, MJML, Vuemail, and Maizzle into your workflow. As long as it’s an npm package or library, you can integrate it with your notification workflow.
• Run custom code between notification steps (email, SMS, in-app, push).
  • For example, before sending an email, get data from an external service or DB.
  • Pass custom data from any component to channel providers within the code.
  • Pass customized and well-designed content data into the In-App notification step.

1import { Echo } from "@novu/echo";
2import { renderReactEmail } from "./emails/react-email";
3
4const commentWorkflow = client.workflow('comment-on-post', async function({ step, subscriber, payload }) => {
5	const inAppResponse = await step.inApp('in-app-step', async (inputs) => {
6		return {
7			body: renderReactComponent(inputs)
8		}
9	}, {
10		inputs: {
11				// ...JSON Schema or ZOD/Ajv/Class Validators definition
12		}
13	});
14
15	// Novu Worker Engine will manage the state and durability of each step in isolation
16	const { events } = await step.digest('digest-events', async () => {
17		return {
18			amount: 1,
19			unit: 'day'
20		};
21	});
22
23	await step.email('comment-reminder', async () => {
24		// Echo runs as part of your application, so you have access to your database or resources
25		const post = await db.findPost(payload.post_id);
26			
27		return {
28			subject: 'E-mail Subject',
29			body: renderReactEmail(inputs, events)
30		}
31  }, {
32		// Step-level inputs defined in code and controlled in the Novu Cloud UI by a Non Technical Team member
33		inputSchema: {
34			// ...JSON Schema
35		},
36		providers: {
37			sendgrid: async (inputs) => {
38				return {
39					ipPoolName: 'custom-pool'
40				}
41			}
42		},
43		skip: () => {
44			// Write custom skip logic
45			return inAppResponse.seen;
46		}
47	});
48}, { 
49	// Define your workflow trigger payload using json schema and custom validation;
50	payloadSchema: {
51		// ...JSON Schema
52	}
53});
54
55// Trigger workflows like you usually do
56commentWorkflow.trigger({
57	to: { subscriberId: '12345' },
58	payload: { ...Custom Trigger Data }
59});

An example of the code-first notification workflow

• Build reusable workflow components. For instance, your codebase can now have rich and complete email, In-App and push notification components all in the same place.
• Integrate with existing legacy design and notification systems.
• Version-controlled notification workflows managed in Git.

• Debug and replay notification workflows in your code editors.
• Define workflow inputs and variables using JSON schema (supports zod, ajv, class validators, and so many more)

1...
2const inAppResponse = await step.inApp('in-app-step', async (inputs) => {
3		return {
4			body: renderReactComponent(inputs)
5		}
6	}, {
7		inputSchema: {
8			type: "object",
9      properties: {
10        prompt: {
11          title: "System Message",
12          type: "string",
13          default: "This is the default message",
14          description: "The system message to be sent.",
15        },
16        showCount: {
17          title: "Show Digest Count",
18          type: "boolean",
19          default: false,
20          description: "Whether to show the count of the messages.",
21        },
22        showSummary: {
23          title: "Show Digest Summary",
24          type: "boolean",
25          default: true,
26          description: "Whether to show the summary of the messages.",
27        },
28      },
29		}
30	});

input using JSON schema

• Deploy changes from your local development environment to the Novu Cloud in your CI platform.

GitOps notification as code

Below is a glimpse of an engineer crafting the notification workflow and content locally using the Novu Dev Studio. Any changes made locally are synced to the Cloud via the click of a button by the engineer.

• The UI components (step inputs) on the right are built from code by the engineer. The result of the code shown earlier.
• The email content is designed using React email.
• The JSON tab displays editable JSON code for making changes

The Novu Dev Studio

No-code control to non-technical users

One major pain point that Novu Echo addresses is the inability for non-technical users to modify parts of the notification workflow as they see fit.

Now, engineers can develop complex notification workflows from code, which exposes a customized UI interface (as shown above) with step inputs that product, marketing, and any non-technical user can safely use to modify the notification experience without breaking the system.

Power has changed hands—from constraint to limitless potential

The code-first notification workflow approach enhances the process of sending and managing notifications. It has put boundless and great power in the hands of engineers, enabling them to bring to life any type of notification systems and engines they imagine.

With this approach, engineers can build notification systems that offer unparalleled flexibility and customization, benefiting their customers, teammates, and companies alike.

• No longer limited by UI notification steps and rigidity.
• No longer limited by notification content editors and systems. The more, the merrier!
• Now an IFTTT (If-This-Then-That) pro engineer!

Delve into building right away with this approach by using our code-first notification workflow guide.