Skip to content
FrameworkJavaScript

Width API: narrow and full editor layouts

Control the editor content width mode. 'narrow' keeps content inside the default --max-width-content. 'full' drops the constraint, 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. Use it 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'. It is 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();