# Horizontal line

The horizontal line feature lets you visually divide your content into sections by inserting horizontal lines (also known as horizontal rules). It is an easy way to organize the content or indicate a change of topic.

<a id="demo">

## Demo

To insert a horizontal line in the demo below, use the toolbar button . Alternatively, start a new line with `---`. The [autoformatting feature](autoformat.md) will turn it into a horizontal line.

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

This demo presents a limited set of features. Visit the [feature-rich editor example](../examples/builds-custom/full-featured-editor.md) to see more in action.

<a id="installation">

## Installation

After [installing the editor](../getting-started/installation/cloud/quick-start.md), add the feature to your plugin list and toolbar configuration:

**NPM**

```js
import { ClassicEditor, HorizontalLine } from 'ckeditor5';

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
		plugins: [ HorizontalLine, /* ... */ ],
		toolbar: [ 'horizontalLine', /* ... */ ],
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

**CDN**

```js
const { ClassicEditor, HorizontalLine } = CKEDITOR;

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ HorizontalLine, /* ... */ ],
		toolbar: [ 'horizontalLine', /* ... */ ],
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="related-features">

## Related features

CKEditor 5 has more features that can help you better organize your document content:

* [Headings](headings.md) – Organize your content into thematic sections.
* [Page break](page-break.md) – Divide your document into pages.
* [Document title](title.md) – Clearly separate the title from the body.
* [Lists](lists/lists.md) – Create ordered (numbered) and unordered (bulleted) lists.
* [Autoformatting](autoformat.md) – Format the content on the go with Markdown code.

<a id="common-api">

## Common API

The [`HorizontalLine`](../api/module_horizontal-line_horizontalline-HorizontalLine.md) plugin registers:

* the UI button component (`'horizontalLine'`),
* the `'horizontalLine'` command implemented by [`HorizontalLineCommand`](../api/module_horizontal-line_horizontallinecommand-HorizontalLineCommand.md).

You can execute the command using the [`editor.execute()`](../api/module_core_editor_editor-Editor.md#function-execute) method:

```js
// Inserts a horizontal line into the selected content.
editor.execute( 'horizontalLine' );
```

> **Note**
>
> We recommend using the official [CKEditor 5 inspector](../framework/development-tools/inspector.md) for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.

<a id="contribute">

## Contribute

The source code of the feature is available on GitHub at <https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-horizontal-line>.

---

Full index of the CKEditor 5 documentation: [llms.txt](../../llms.txt)