Notifications & Alerts

Notifications flow in both directions: the disableAlerts option with the onAlert callback routes the editor's toasts into your own notification system, and the createNotification() method pushes your application's messages into the editor. Both directions share one notification shape.

The notification object

Notifications everywhere in the editor share one shape:

{
  type: "info" | "error" | "success",  // required
  text: "The notification message",     // required
  title?: "Optional heading",
  persistent?: boolean,                 // stays until dismissed
  expectSideEffect?: boolean,
  extarnalUse?: boolean,                // note: spelling as implemented
  id?: string | number
}

There is no warning type and no timestamp field; the three types above are the complete list.

disableAlerts

The disableAlerts option (boolean, default false) suppresses the editor's built-in toast UI and routes notifications to your onAlert callback instead. Notifications flagged extarnalUse: true are still rendered in-editor, and some low-level failures are logged to the browser console only and never surface as notifications.

WARNING

With disableAlerts: true and no onAlert handler, notifications are dropped entirely, not merely hidden. Users get no feedback about save status, errors, or operation outcomes. Always pair disableAlerts: true with an onAlert handler.

Custom notifications with the onAlert callback

With disableAlerts: true, the onAlert callback is the main integration point for displaying notifications in your UI. Note that disableAlerts is a config option while onAlert is a callback passed next to config:

const LPE = LandingPageEditor({
  config: {
    authorize: { apiKey: "YOUR_API_KEY", userId: "user-123" },
    disableAlerts: true, // Suppress default alerts
  },
  onAlert: ({ notification }) => {
    console.log("Notification:", notification.type, notification.text);
    yourNotificationSystem.show(notification);
  },
});
LPE.render("#landing-page-editor");

A few practical notes:

• The message text is in notification.text (not message).
• Notifications delivered to onAlert do not carry an id; generate your own key when rendering a toast list.
• In practice most editor notifications are of type error; success and info are used sparingly, so filtering down to errors loses little:

onAlert: ({ notification }) => {
  if (notification.type === "error") {
    yourNotificationSystem.show(notification);
  }
};

Pushing notifications into the editor

The counterpart to onAlert is the createNotification() instance method, which displays your own notification inside the editor UI:

LPE.createNotification({
  type: "success",
  text: "Saved to your CMS",
  title: "Done",
});

Only type and text are required. With disableAlerts: true, add extarnalUse: true to the notification, otherwise it is routed straight back out to your own onAlert handler instead of being rendered in the editor.