Skip to content
FrameworkJavaScript

Width API: narrow and full editor layouts

Control the editor's content width mode: `'narrow'` keeps the default max-width, `'full'` removes it so content fills its container.

Edit 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

width.get()

'narrow' | 'full'

The active content width mode. Defaults to 'narrow'.

When to use

Returns the active mode, defaulting to 'narrow'.

TypeScript
console.log(editor.width.get()); // 'narrow'

width.set(value)

void

Set the content width mode. This is what the React/Vue/Angular `width` prop syncs to after mount.

When to use

Applies a mode explicitly — the right call when the width is driven by your own state.

TypeScript
editor.width.set('full');

width.toggle()

void

Flip the content width mode between 'narrow' and 'full' — the one-call "full width" switch.

When to use

Flips between 'narrow' and 'full', for a one-click "full width" control.

TypeScript
editor.width.toggle();