Skip to content
FrameworkJavaScript

Notifier API: show notifications

Display notification messages to users. Rendering is pluggable. Pass notifier: (options) => … in the constructor config and Blok calls your handler instead of rendering anything.

The built-in toast is skipped entirely, including its i18n okText/cancelText defaults. Any error your handler throws propagates to the show() call site.

notifierPosition places the built-in container: 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-left' | 'top-right' | 'top-center' (default 'bottom-center').

Last updated Sep 8, 2026Edit this page on GitHub

Reaching the editor instance

The methods below run on the editor you created with new Blok(). They are available once editor.isReady resolves.

TypeScript
// You already hold the instance returned by the constructor.
const editor = new Blok({ holder: 'editor' });
await editor.isReady;

// Call any API method on it.
editor.caret.setToLastBlock('end');

Methods

notifier.show(options)

void

Show a notification message. Supports simple, confirm, and prompt notifications.

When to use

Built-in toast for lightweight feedback. Set type: 'confirm' or 'prompt' to collect a yes/no or text response.

Parameters

ParameterTypeRequiredDefaultDescription
optionsNotifierOptions | ConfirmNotifierOptions | PromptNotifierOptionsRequired—

Notification configuration. Shape depends on type.

options.messagestringRequired—

Notification text. May contain HTML.

options.type'alert' | 'confirm' | 'prompt'—'alert'

Notification type. confirm and prompt add action buttons.

options.style'success' | 'error'—undefined

Marks the notification's semantic kind. With 'error' the message's screen-reader live region is assertive. Otherwise it is polite. The value is also stamped onto data-blok-testid as notification-success / notification-error.

The built-in toast looks the same either way. There is no success/error coloring.

options.timenumber—8000

Auto-dismiss delay in ms for alert notifications (default 8000). Confirm and prompt notifications ignore this and stay until the user resolves them.

options.okTextstring—i18n `notifier.confirm` / `notifier.ok` ('Confirm' / 'OK' in English)

Label for the confirm/submit button (confirm/prompt types only).

options.okHandler(event: Event) => void | (value: string) => void—undefined

Confirm/submit callback. Receives the click event for confirm, or the input value for prompt. Required for prompt notifications.

options.cancelTextstring—i18n `notifier.cancel` ('Cancel' in English)

Label for the cancel button (confirm and prompt types).

options.cancelHandler(event: Event) => void—undefined

Cancel/close callback. If you provide it, Blok calls it before the dialog closes via the cancel button or dismiss/Escape. It runs for both confirm and prompt types.

options.inputTypestring—'text'

HTML input type for the prompt's text field (prompt type only).

options.placeholderstring—undefined

Placeholder text for the prompt's input field (prompt type only).

options.defaultstring—undefined

Default value pre-filled in the prompt's input field (prompt type only).

Errors

  • The notifier module fails to load (e.g. blocked by CSP, dynamic import failure).

    [Blok] Failed to display notification. Reason: <error>

    The built-in notifier never throws or rejects. Check the browser console instead: the failure is logged, not passed to your call site. A custom config.notifier handler is different. Blok calls it synchronously, and its exceptions are not caught.

TypeScript
// Simple notification
editor.notifier.show({
  message: 'Changes saved',
  style: 'success'
});
// → renders a body-mounted, viewport-fixed toast (default: bottom-center —
//   see config.notifierPosition); returns nothing to await

// Confirm notification
editor.notifier.show({
  message: 'Delete this block?',
  type: 'confirm',
  okHandler: () => console.log('Confirmed'),
  cancelHandler: () => console.log('Cancelled')
});

// Prompt notification
editor.notifier.show({
  message: 'Enter a title',
  type: 'prompt',
  okHandler: (value) => console.log('Entered:', value)
});