---
title: "HorizontalRule extension"
description: "Use the Horizontal Rule extension in Tiptap to render the `` HTML tag for separating content. Learn more in our docs!"
canonical_url: "https://tiptap.dev/docs/editor/extensions/nodes/horizontal-rule"
---

# HorizontalRule extension

Use the Horizontal Rule extension in Tiptap to render the `` HTML tag for separating content. Learn more in our docs!

Use this extension to render a `<hr>` HTML tag. If you pass `<hr>` in the editor’s initial content, it’ll be rendered accordingly.

Type three dashes (---) or three underscores and a space (\_\_\_ ) at the beginning of a new line and it will magically transform to a horizontal rule.

> **Interactive demo:** [HorizontalRule](https://embed.tiptap.dev/preview/Nodes/HorizontalRule)

## Install

```bash
npm install @tiptap/extension-horizontal-rule
```

## Settings

### HTMLAttributes

Custom HTML attributes that should be added to the rendered HTML tag.

```js
HorizontalRule.configure({
  HTMLAttributes: {
    class: 'my-custom-class',
  },
})
```

## Commands

### setHorizontalRule()

Create a horizontal rule.

```js
editor.commands.setHorizontalRule()
```

## Source code

[packages/extension-horizontal-rule/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-horizontal-rule/)