FrameworkJavaScript

Events API: subscribe to editor events

Subscribe to and manage editor lifecycle events.

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

on(event, callback)

void

Subscribe to an editor event.

When to use

Subscribe to editor lifecycle/content events. Keep a reference to the same callback so you can off() it later.

TypeScript

// Listen for block mutations — the callback receives the event payload,
// not an API object
editor.on('block changed', ({ event }) => {
  console.log('Block mutated:', event.type);
});

// Listen for individual block renders
editor.on('block:rendered', ({ blockId }) => {
  console.log('Rendered block:', blockId);
});

// To react to content changes with access to the API, use the
// onChange(api, event) config callback (async is allowed there):
//   onChange: async (api) => { const data = await api.save(); }

off(event, callback)

void

Unsubscribe from an editor event.

When to use

Pass the exact same function reference you subscribed with — anonymous inline callbacks can't be removed.

TypeScript

const handleRendered = (payload) => console.log('Rendered');
editor.on('block:rendered', handleRendered);

// Later, remove the listener (pass the same function reference)
editor.off('block:rendered', handleRendered);

emit(event, data)

void

Emit a custom event.

When to use

For tools/plugins to broadcast custom events on the editor bus; app code usually listens with on() rather than emits.

TypeScript

editor.emit('custom-event', { message: 'Hello', data: 123 });

// Listen to custom events
editor.on('custom-event', (data) => {
  console.log(data.message); // 'Hello'
});