Code Steps

Each step now has two modes: Editor (visual) and Custom Code (developer-managed via code). Switch any step to Custom Code mode, and the dashboard shows a pre-filled CLI command.

Novu dashboard showing an In-App step editor switched to Custom Code mode, displaying the pre-filled npx novu step publish CLI command and a "Waiting for first deployment" state with an empty preview panel on the right. — Switch any step to Custom Code mode and the dashboard shows the publish command, pre-filled and ready to run.

Run it to scaffold a placeholder handler and deploy it:

npx novu step publish \
  --workflow your-workflow-id \
  --step your-step-id \
  --secret-key nv-sk-...

React Email for Email Steps

For email steps, pass --template to wire a React Email component directly:

npx novu step publish \
  --workflow onboarding \
  --step welcome-email \
  --template ./emails/welcome.tsx \
  --secret-key nv-sk-...

Your React Email components stay in your repo, go through PR review, and are versioned alongside your application code.

Controls: Dashboard Editing Without Code Changes

Define a controlSchema in your code steps to expose editable fields in the Novu dashboard. Developers set the structure and defaults - non-technical teammates override copy without touching code.

Novu dashboard showing a published In-App Code Step with a controlSchema-defined ButtonText field editable in the dashboard. The right panel previews the live in-app notification with the "Let's begin" button rendered in real time. — Once published, controls defined in your handler appear as editable fields in the dashboard - no code change needed to update copy.

Mix Custom Code steps and Editor steps freely within the same Workflow.

Switch any step to Custom Code mode and copy the pre-filled command from the step editor to get started.

Get started with Code Steps →