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

​
Installation

npm install @tiptap/extension-heading

​
Usage

The Heading extension is included in the StarterKit by default: 
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

const editor = new Editor({
  extensions: [StarterKit],
})
To use it standalone: 
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.
​
levels
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).
Heading.configure({
  levels: [1, 2, 3],
})

​
HTMLAttributes

Custom HTML attributes to add to the rendered heading elements.
​
HTMLAttributes
Record<string, any>
default:"{}"
Custom HTML attributes that should be added to the rendered HTML tag.
Heading.configure({
  HTMLAttributes: {
    class: 'my-heading',
  },
})

​
Commands

​
setHeading

Converts the current node to a heading with the specified level. 
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. 
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