# Table of contents

The table of contents feature lets you insert a widget with a list of headings (section titles) that reflects the structure of the document. The list stays up–to–date automatically as the user works on the document. Clicking a list item navigates the user to the corresponding document section.

> **Unlock this feature with selected CKEditor Plans**
>
> Try all premium features – no credit card needed.
>
> [Sign up for a free trial ](https://portal.ckeditor.com/checkout?plan=free)[Select a Plan](https://ckeditor.com/pricing/)

<a id="demo">

## Demo

Create several headings in the editor and click the table of contents button in the toolbar. Change the heading text or level to see the table of contents getting updated live.

<!-- 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. -->

<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 } from 'ckeditor5';
import { TableOfContents } from 'ckeditor5-premium-features';

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

**CDN**

```js
const { ClassicEditor } = CKEDITOR;
const { TableOfContents } = CKEDITOR_PREMIUM_FEATURES;

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

By default, the table of contents feature takes care of managing the heading IDs and creating proper links with a dedicated `href` attribute. The output data produced by this feature ensures that clicking a link in a table of contents will scroll to the corresponding heading in the content.

<a id="activating-the-feature">

### Activating the feature

To use this premium feature, you need to activate it with proper credentials. Refer to the [License key and activation](../getting-started/licensing/license-key-and-activation.md) guide for details.

<a id="related-features">

## Related features

Here are some more CKEditor 5 features that can help you navigate the content of the editor:

* [Document outline](document-outline.md) – Display the list of sections (headings) of the document next to the editor.
* [Content minimap](minimap.md) – Navigate the document using a miniature overview map placed next to the editor.
* [Pagination](pagination/pagination.md) – See the live preview of the document’s page breaks and quickly navigate between pages.

<a id="common-api">

## Common API

The [`TableOfContents`](../api/module_document-outline_tableofcontents-TableOfContents.md) plugin registers:

* The `'tableOfContents'` UI button component.
* The `'insertTableOfContents'` command implemented by [`TableOfContentsCommand`](../api/module_document-outline_tableofcontents_tableofcontentscommand-TableOfContentsCommand.md).

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

```js
// Insert the table of contents.
editor.execute( 'insertTableOfContents' );
```

> **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.

---

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