---
title: "Spacer Block — Adjustable Vertical Space"
description: "A resizable vertical space block for controlling page rhythm, and the height it stores in its data."
source: https://blokeditor.com/docs/spacer/
lastmod: 2026-09-07
---

Framework JavaScript

Block Tools Spacer

# Spacer block: adjustable vertical space

An adjustable vertical gap. Drag either edge grip — or focus one and press ArrowUp/ArrowDown — to resize. Its main job is lining up content across sibling columns of unequal length, replacing piles of empty paragraphs. Invisible in read-only mode.

### Import

TypeScript

```
import { Spacer } from '@bloklabs/core/tools';
```

### Save Data

TypeScript

```
interface SpacerData {
  height?: number; // Gap height in px, clamped to 38–600 (default 38)
}
```

JSON

```
{
  "id": "spc001",
  "type": "spacer",
  "data": {
    "height": 120
  }
}
```

### Usage Example

TypeScript

```
import { Blok } from '@bloklabs/core';
import { Spacer } from '@bloklabs/core/tools';

const editor = new Blok({
  holder: 'editor',
  tools: {
    spacer: {
      class: Spacer,
    },
  },
});
```