---
title: "Blok Width API — narrow and full layouts"
description: "Read, set, and toggle the editor's content width between the default narrow column and the full width of its container."
source: https://blokeditor.com/docs/width-api/
lastmod: 2026-09-08
---

Framework JavaScript

Interface Width

On this page width.get()

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

Last updated Sep 8, 2026 [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

### 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();
```