Skip to main content
The HorizontalRule extension allows you to insert horizontal rules (dividers) into your document. These are commonly used to create visual breaks between sections.

​
Installation

npm install @tiptap/extension-horizontal-rule

​
Usage

The HorizontalRule 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 HorizontalRule from '@tiptap/extension-horizontal-rule'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'

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

​
Configuration

​
HTMLAttributes

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

​
nextNodeType

The default node type to insert after the horizontal rule.
​
nextNodeType
string
default:"'paragraph'"
Specifies which node type to create after inserting a horizontal rule at the end of the document.
HorizontalRule.configure({
  nextNodeType: 'paragraph',
})

​
Commands

​
setHorizontalRule

Inserts a horizontal rule at the current position and automatically positions the cursor after it. 
editor.commands.setHorizontalRule()

​
Input Rules

The HorizontalRule extension supports multiple Markdown-style input rules:
  • Type --- followed by a space to insert a horizontal rule
  • Type ___ followed by a space to insert a horizontal rule
  • Type *** followed by a space to insert a horizontal rule

​
Behavior

When you insert a horizontal rule:
  1. The rule is inserted at the current cursor position
  2. If there’s content after the rule, the cursor moves to that content
  3. If the rule is at the end of the document, a new paragraph is automatically created after it
  4. The cursor is positioned in the correct location for continued editing

​
Source Code

View the source code on GitHub: packages/extension-horizontal-rule/src/horizontal-rule.ts