# Footnotes

The footnotes feature allows you to add supplementary information, citations, or explanatory notes that appear at the bottom of your document without cluttering the main text. Simply select any content you need annotated and click the footnote button to create a numbered reference that readers can easily navigate to and from.

> **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/)

Due to the differences between printed and digital content, the footnotes in CKEditor 5 are actually grouped together, like endnotes, and not at the bottom of each page.

<a id="demo">

## Demo

Point your cursor to where you need to add a footnote and use the toolbar footnote button to add one. You can also edit existing footnotes and choose marker style by clicking in the footnotes area.

<!-- 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 } from 'ckeditor5';
import { Footnotes, FootnotesProperties } from 'ckeditor5-premium-features';

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Footnotes, FootnotesProperties, /* ... */ ],
		toolbar: [ 'insertFootnote', /* ... */ ],
		footnotes: {
			multiBlock: false // Turn off the multi-block support (enabled by default).
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

**CDN**

```js
const { ClassicEditor } = CKEDITOR;
const { Footnotes, FootnotesProperties } = CKEDITOR_PREMIUM_FEATURES;

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Footnotes, FootnotesProperties, /* ... */ ],
		toolbar: [ 'insertFootnote', /* ... */ ],
		footnotes: {
			multiBlock: false // Turn off the multi-block support (enabled by default).
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

Please note that the `FootnotesProperties` plugin is optional. See the [Configuration](#configuration) section for more details.

> **Note**
>
> Read more about [installing plugins](../getting-started/setup/configuration.md) and [toolbar configuration](../getting-started/setup/toolbar.md).

<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="configuration">

## Configuration

<a id="multi-block-footnotes">

### Multi-block footnotes

The footnotes feature can be configured using the `footnotes.multiBlock` option. By default, this option is set to `true`, allowing users to create footnotes that span multiple blocks of content. You can disable this feature by setting `multiBlock` to `false` in the editor configuration:

```ts
ClassicEditor
	.create( {
		footnotes: {
			multiBlock: false // Default: true
		}
	} )
```

When `multiBlock` is set to `true`, users can add footnotes that span multiple blocks of content, such as paragraphs or list items. This allows for more complex annotations and references within the document.

When `multiBlock` is set to `false`, users can only add footnotes to single blocks of content. This is useful for simpler documents where footnotes are only needed for specific points within a block. The content of the footnote definition will be limited to text only.

<a id="the-footnotesproperties-contextual-balloon">

### The `FootnotesProperties` contextual balloon

The optional `FootnotesProperties` plugin (as seen imported in the [Installation](#installation) section) adds a contextual dropdown that appears when you click the footnotes definitions area. It provides quick access to footnote formatting options, allowing users to change the marker numbering style.

The [`FootnotesProperties`](../api/module_footnotes_footnotesproperties-FootnotesProperties.md) plugin provides additional configuration option to choose the default style of the list item markers:

```js
ClassicEditor
	.create( {
		footnotes: {
			footnotesProperties: {
				// The default footnotes list style for newly created footnotes lists.
				// It can be changed using the 'Footnotes style' dropdown in the editor UI.
				defaultListStyle: 'decimal', // Default: 'decimal'

				// The starting index for the footnotes list numbering.
				// It can be changed using the 'start' dropdown in the editor UI.
				// Note: The starting index must be a positive integer greater or equal to 0.
				defaultStartIndex: 1, // Default: 1

				// Configuration of the footnotes style dropdown shown when the user clicks footnotes definitions list.
				toolbar: [ 'footnotesStyle' ], // Default: [ 'footnotesStyle' ]

				// List of styles available in the footnotes style dropdown.
				listStyles: [ 'decimal' ] // Default: [ 'decimal', 'decimal-leading-zero', 'lower-latin', 'upper-latin', 'lower-roman', 'upper-roman' ]
			}
		}
	} )
```

Available list styles: `'decimal'`, `'decimal-leading-zero'`, `'lower-roman'`, `'upper-roman'`, `'lower-latin'`, `'upper-latin'`, `'arabic-indic'`.

The `arabic-indic` style is not shown in the dropdown by default. To enable it, add it to the `listStyles` configuration:

```js
footnotes: {
	footnotesProperties: {
		listStyles: [
			'decimal',
			'decimal-leading-zero',
			'lower-latin',
			'upper-latin',
			'lower-roman',
			'upper-roman',
			'arabic-indic'
		]
	}
}
```

<a id="known-issues">

## Known issues

Moving the footnotes list while [Track Changes](collaboration/track-changes/track-changes.md) is enabled is not supported - a document can contain at most one footnotes list. As a workaround, temporarily disable track changes or accept/reject the relevant changes, then perform the move.

<a id="related-features">

## Related features

Check out also these CKEditor 5 features to gain better control over your content style and format:

* [General HTML Support](html/general-html-support.md) – Allows you to enable HTML features (elements, attributes, classes, styles) that are not explicitly supported by other dedicated CKEditor 5 plugins.
* [Headings](headings.md) – Divide your content into sections.
* [Page break](page-break.md) – Divide your content into pages.

<a id="common-api">

## Common API

The [`Footnotes`](../api/module_footnotes_footnotes-Footnotes.md) plugin registers:

* The [`'insertFootnote'` command](../api/module_footnotes_commands_insertfootnotecommand-InsertFootnoteCommand.md).
* The `'insertFootnote'` UI component – a button to insert footnotes.

The [`FootnotesProperties`](../api/module_footnotes_footnotesproperties-FootnotesProperties.md) plugin registers:

* The [`'footnotesStyle'` command](../api/module_footnotes_footnotesproperties_commands_footnotesstylecommand-FootnotesStyleCommand.md).
* The `'footnotesStyle'` UI component – a dropdown to change footnotes numbering style.

<a id="executing-commands">

### Executing commands

You can insert a footnote programmatically by executing the command:

```js
editor.execute( 'insertFootnote' );
```

You can also specify a custom footnote ID:

```js
editor.execute( 'insertFootnote', { footnoteId: 'my-custom-footnote-id' } );
```

If the `footnoteId` parameter is not provided, a unique ID will be generated automatically. The footnote ID must be a non-empty string without spaces that does not start with a digit.

You can change the footnotes style by executing:

```js
editor.execute( 'footnotesStyle', { value: 'lower-roman' } );
```

Available style values: `'decimal'`, `'decimal-leading-zero'`, `'lower-roman'`, `'upper-roman'`, `'lower-latin'`, `'upper-latin'`, `'arabic-indic'`.

---

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