---
title: "Lists plugin"
description: "Normalizes list behavior between browsers."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/lists/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/lists/index.md"
version: "latest"
last_updated: "2026-03-09T01:59:33Z"
tokens: 1428
---
# Lists plugin

The `lists` plugin allows you to add numbered and bulleted lists to TinyMCE. To enable List Styles (e.g. alpha numbered lists, square bullets) you should also enable the [List Styles](../advlist/) (`advlist`) plugin.

The plugin also normalizes list behavior between browsers. Enable it if you have problems with consistency making lists.

## Basic setup

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'lists',
  toolbar: 'numlist bullist'
});
```

> **Note:** For information on bundling this plugin with module bundlers, see [Bundling TinyMCE - Overview](../bundling-guide/).

## Example adding the `listprops` menu item to the Tools menu

The `listprops` [menu item](#menu-items) opens the List Properties dialog.

This dialog only works with numbered lists. The menu item is inactive unless the selection or insertion point is within a numbered list.

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'lists',
  toolbar: 'bullist numlist',
  menu: { tools: { title: 'Tools', items: 'listprops' }},
});
```

## Options

These settings affect the execution of the `lists` plugin.

### `lists_indent_on_tab`

This boolean option allows to disable the indent on tab key functionality. Its default value is set to `true`.

**Type:** `Boolean`

**Default value:** `true`

**Possible values:** `true`, `false`

#### Example: using `lists_indent_on_tab`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'lists',
  toolbar: 'numlist bullist',
  lists_indent_on_tab: false
});
```

## Toolbar buttons

The Lists plugin provides the following toolbar buttons:

| Toolbar button identifier | Description |
| --- | --- |
| `bullist` | Formats the current selection as a bullet list. |
| `numlist` | Formats the current selection as a numbered list. |

These toolbar buttons can be added to the editor using:

- The [`toolbar`](../toolbar-configuration-options/#toolbar) configuration option.
- The [`quickbars_insert_toolbar`](../quickbars/#quickbars_insert_toolbar) configuration option.
- [Custom Context toolbars](../contexttoolbar/).

## Menu items

The Lists plugin provides the following menu items:

| Menu item identifier | [Default Menu Location](../menus-configuration-options/#example-the-tinymce-default-menu-items) | Description |
| --- | --- | --- |
| `listprops` | *Not applicable* | Opens the List Properties dialog. Only works on numbered lists. |

These menu items can be added to the editor using:

- The [`menu`](../menus-configuration-options/#menu) configuration option.
- The [`contextmenu`](../menus-configuration-options/#contextmenu) configuration option.
- [Custom Menu toolbar buttons](../custom-menu-toolbar-button/).

## Commands

The Lists plugin provides the following TinyMCE commands.

| Command | Description |
| --- | --- |
| InsertDefinitionList | Inserts a definition list into the editor. |
| InsertOrderedList | Inserts an ordered list into the editor. |
| InsertUnorderedList | Inserts an unordered list into the editor. |
| mceListUpdate | Updates list attributes or styles. |
| mceListProps | Opens the list properties dialog. |
| RemoveList | Removes the list elements from the selection. |

Examples
```js
tinymce.activeEditor.execCommand('InsertDefinitionList', false, {
  'list-item-attributes': {class: 'mylistitemclass'},
  'list-attributes': {id: 'mylist'}
});
tinymce.activeEditor.execCommand('InsertOrderedList', false, {
  'list-style-type': 'decimal',
  'list-item-attributes': {class: 'mylistitemclass'},
  'list-attributes': {id: 'mylist'}
});
tinymce.activeEditor.execCommand('InsertUnorderedList', false, {
  'list-style-type': 'disc',
  'list-item-attributes': {class: 'mylistitemclass'},
  'list-attributes': {id: 'mylist'}
});
tinymce.activeEditor.execCommand('mceListUpdate', false, {
  styles: { 'background-color': 'powderblue' }
});
tinymce.activeEditor.execCommand('mceListUpdate', false, {
  attrs: { contenteditable: 'false' }
});
tinymce.activeEditor.execCommand('mceListProps');
tinymce.activeEditor.execCommand('RemoveList');
```

## Inline formatting

List bullets and list numbers can now be inline-formatted.

Inline-formatting, also known as spot-formatting, is the direct formatting of an object. It contrasts with formatting applied to an object because that object is a particular type of object.

As of TinyMCE 6.2, a sub-set of all inline-formatting options can be applied to list bullets and list numbers.

If an end-user selects the entire contents of a list item and applies inline formatting — such as a color change or a font-size change — this spot-formatting is also applied to the list item’s associated bullet or number.

Only the list bullets or list numbers associated with the selection take on the inline-formatting applied to the selection.

If the selection having inline formatting applied is one list item (that is, if the selection runs from one `<li>` tag to its associated `</li>` tag), the bullet or number associated with the selected list item takes on the inline-formatting applied to the selection.

If the selection is the entire list, (that is, if the selection runs from the list’s opening `<ol>` or `<ul>` tag to the closing `</ol>` or `</ul>` tag, or if the selection runs from the list’s first `<li>` tag to the last `</li>` tag), every bullet or number takes on the inline-formatting applied to the selection.

> **Important:** If, after applying inline-formatting, a partial selection of the now inline-formatted material is made and said inline-formatting is removed from the partial selection, the list bullet or list number formatting will also be removed.

### PowerPaste Premium plugin support

Users of the [PowerPaste](../introduction-to-powerpaste/) Premium plugin should note, this plugin does not, currently, support inline-formatted bullets or list numbers.

Inline-formatting, as applied to the bullets or list numbers, is lost when such material is copied and pasted using the PowerPaste plugin.

> **Note:** Inline-formatting as applied to list elements has always been supported by [PowerPaste](../introduction-to-powerpaste/) and continues to be so supported.