> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/ueberdosis/tiptap/llms.txt
> Use this file to discover all available pages before exploring further.

# Heading

> Create headings of different levels (h1 through h6) in your editor.

The Heading extension allows you to create headings with different levels. It supports headings from level 1 to 6.

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @tiptap/extension-heading
  ```

  ```bash yarn theme={null}
  yarn add @tiptap/extension-heading
  ```

  ```bash pnpm theme={null}
  pnpm add @tiptap/extension-heading
  ```
</CodeGroup>

## Usage

The Heading extension is included in the StarterKit by default:

```typescript theme={null}
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

const editor = new Editor({
  extensions: [StarterKit],
})
```

To use it standalone:

```typescript theme={null}
import { Editor } from '@tiptap/core'
import Document from '@tiptap/extension-document'
import Heading from '@tiptap/extension-heading'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'

const editor = new Editor({
  extensions: [
    Document,
    Paragraph,
    Text,
    Heading,
  ],
})
```

## Configuration

### levels

Specifies which heading levels are available in the editor.

<ParamField path="levels" type="Level[]" default="[1, 2, 3, 4, 5, 6]">
  An array of heading levels to enable. Each level corresponds to an HTML heading tag (h1-h6).

  ```typescript theme={null}
  Heading.configure({
    levels: [1, 2, 3],
  })
  ```
</ParamField>

### HTMLAttributes

Custom HTML attributes to add to the rendered heading elements.

<ParamField path="HTMLAttributes" type="Record<string, any>" default="{}">
  Custom HTML attributes that should be added to the rendered HTML tag.

  ```typescript theme={null}
  Heading.configure({
    HTMLAttributes: {
      class: 'my-heading',
    },
  })
  ```
</ParamField>

## Commands

### setHeading

Converts the current node to a heading with the specified level.

```typescript theme={null}
editor.commands.setHeading({ level: 1 })
editor.commands.setHeading({ level: 2 })
```

### toggleHeading

Toggles a heading node with the specified level. If the current node is already a heading with that level, it converts it to a paragraph.

```typescript theme={null}
editor.commands.toggleHeading({ level: 1 })
editor.commands.toggleHeading({ level: 2 })
```

## Keyboard Shortcuts

* **Mod-Alt-1**: Toggle heading level 1
* **Mod-Alt-2**: Toggle heading level 2
* **Mod-Alt-3**: Toggle heading level 3
* **Mod-Alt-4**: Toggle heading level 4
* **Mod-Alt-5**: Toggle heading level 5
* **Mod-Alt-6**: Toggle heading level 6

## Input Rules

The Heading extension supports Markdown-style input rules:

* Type `#` followed by a space to create an h1
* Type `##` followed by a space to create an h2
* Type `###` followed by a space to create an h3
* And so on, up to `######` for h6

## Source Code

View the source code on GitHub:

[packages/extension-heading/src/heading.ts](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-heading/src/heading.ts)