---
title: "Blok Notifier API — show a notification"
description: "Show success, error, and confirmation notifications from inside a tool or from host code."
source: https://blokeditor.com/docs/notifier-api/
lastmod: 2026-09-07
---

Framework JavaScript

Interface Notifier

On this page notifier.show(options)

# 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), and 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').

[Edit this page on GitHub](https://github.com/JackUait/blok/blob/main/docs/src/components/api/api-data.ts)

### 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

| Parameter | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `options` | `NotifierOptions | ConfirmNotifierOptions | PromptNotifierOptions` | Required | — | Notification configuration. Shape depends on type. |
| `options.message` | `string` | Required | — | 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. `'error'` raises the message's screen-reader live region to `assertive` (otherwise `polite`), and the value is stamped onto `data-blok-testid` as `notification-success` / `notification-error`. The built-in toast looks identical either way — there is no success/error coloring. |
| `options.time` | `number` | — | `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.okText` | `string` | — | `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.cancelText` | `string` | — | `i18n `notifier.cancel` ('Cancel' in English)` | Label for the cancel button (confirm and prompt types). |
| `options.cancelHandler` | `(event: Event) => void` | — | `undefined` | Cancel/close callback. Invoked (when provided) before the dialog closes via the cancel button or dismiss/Escape — for both confirm and prompt types. |
| `options.inputType` | `string` | — | `'text'` | HTML input type for the prompt's text field (prompt type only). |
| `options.placeholder` | `string` | — | `undefined` | Placeholder text for the prompt's input field (prompt type only). |
| `options.default` | `string` | — | `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, since the failure is logged rather than propagated to your call site. A custom `config.notifier` handler is a different story: it is called 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)
});
```