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 it fills its container.
Reaching the editor instance
The methods below run on the editor you created with new Blok(). They are available once editor.isReady resolves.
// 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'.
console.log(editor.width.get()); // 'narrow'width.set(value)
voidSet 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.
editor.width.set('full');width.toggle()
voidFlip 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.
editor.width.toggle();