# @editorjs/header

> Heading Tool for Editor.js

Latest version **2.8.9** (published 2026-05-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @editorjs/header
pnpm add @editorjs/header
yarn add @editorjs/header
bun add @editorjs/header
```

## Health

**Score 55/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.8.9 |
| Published | 2026-05-12 |
| First published | 2019-03-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 26.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | CodeX |
| Maintainers | codex-team |
| Keywords | codex editor, header, heading, editor.js, editorjs |

## Links

- npm: https://www.npmjs.com/package/@editorjs/header
- Repository: https://github.com/editor-js/header
- npm.io page: https://npm.io/package/@editorjs/header

## Dependencies (2)

- [@codexteam/icons](https://npm.io/package/@codexteam/icons.md) ^0.0.5
- [@editorjs/editorjs](https://npm.io/package/@editorjs/editorjs.md) ^2.30.7

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 2.8.9 (latest) — 2026-05-12
- 2.8.8 — 2024-10-09
- 2.8.7 — 2024-07-13
- 2.8.6 — 2024-07-09
- 2.8.5 — 2024-07-04
- 2.8.4 — 2024-07-03
- 2.8.3 — 2024-07-03
- 2.8.2 — 2024-07-03
- 2.8.1 — 2023-11-09
- 2.8.0 — 2023-11-08
- 2.7.0 — 2022-11-29
- 2.6.2 — 2021-11-24
- 2.6.1 — 2020-11-17
- 2.6.0 — 2020-10-01
- 2.5.0 — 2020-06-06
- … 11 more at https://npm.io/package/@editorjs/header/versions

## README

# Heading Tool

![Version of EditorJS that the plugin is compatible with](https://badgen.net/badge/Editor.js/v2.0/blue)

Provides Headings Blocks for the [Editor.js](https://ifmo.su/editor).

## Installation

Get the package

```shell
yarn add @editorjs/header
```

Include module at your application

```javascript
import Header from '@editorjs/header';
```

Optionally, you can load this tool from CDN [JsDelivr CDN](https://cdn.jsdelivr.net/npm/@editorjs/header@latest)

## Usage

Add a new Tool to the `tools` property of the Editor.js initial config.

```javascript
var editor = EditorJS({
  ...

  tools: {
    ...
    header: Header,
  },

  ...
});
```

## Shortcut

You can insert this Block by a useful shortcut. Set it up with the `tools[].shortcut` property of the Editor's initial config.

```javascript
var editor = EditorJS({
  ...

  tools: {
    ...
    header: {
      class: Header,
      shortcut: 'CMD+SHIFT+H',
    },
  },

  ...
});
```

## Config Params

All properties are optional.

| Field        | Type       | Description                 |
| ------------ | ---------- | --------------------------- |
| placeholder  | `string`   | header's placeholder string |
| levels       | `number[]` | enabled heading levels      |
| defaultLevel | `number`   | default heading level       |

```javascript
var editor = EditorJS({
  ...

  tools: {
    ...
    header: {
      class: Header,
      config: {
        placeholder: 'Enter a header',
        levels: [2, 3, 4],
        defaultLevel: 3
      }
    }
  }

  ...
});
```

## Tool's settings

![An image showing the header block tool](https://capella.pics/634ad545-08d7-4cb7-8409-f01289e0e5e1.jpg)

You can select one of six levels for heading.

## Output data

| Field | Type     | Description                                      |
| ----- | -------- | ------------------------------------------------ |
| text  | `string` | header's text                                    |
| level | `number` | level of header: 1 for H1, 2 for H2 ... 6 for H6 |

```json
{
  "type": "header",
  "data": {
    "text": "Why Telegram is the best messenger",
    "level": 2
  }
}
```

---
_Source: https://npm.io/package/@editorjs/header · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._