Contribute to this guide


The list feature allows creating ordered (numbered) and unordered (bulleted) lists. This allows for better structuring and presenting specific content such as enumerating elements, creating tables of content or to-do lists.

Lists are useful when you want to emphasize selected information, highlight a series of steps, enumerate items of a collection. They draw the reader’s attention and, just like block quotes or indentation, give the text a structure and breathing room. They help visually separate passages for a better reading experience and make skimming for information easier.

You may find additional interesting details and examples in the Lists in CKEditor 5 blog post after reading this guide.

The feature is enabled by default in all CKEditor 5 WYSIWYG editor builds.

# Ordered and unordered lists

An unordered (bulleted) list can represent items where the order is not important, for example, a list of ingredients required for preparing a dish or a drink.

An ordered (numbered) list can be used if the order of the items matters, for example, when creating an instruction. Here, the sequence of steps that must be done is important.

# Demo

Use the editor below to see the list feature plugin in action. Toolbar buttons can be used to insert both ordered Insert ordered list and unordered lists Insert unordered list.

A Markdown code provided by the autoformatting feature can also be utilized:

  • Start a line with * or - followed by a space for a bulleted list.
  • Start a line with 1. or 1) followed by a space for a numbered list.


Ingredients required for making a coffee:

  • 15g ground coffee
  • water
  • milk (optional)


How to prepare a cup of coffee:

  1. Gather the ingredients.
  2. Put 15g of ground coffee in the cup.
  3. Boil 200ml of water.
  4. Pour the water into the cup.
  5. Optional: Add milk.

# List styles

The list style feature introduces some more styles for the list item markers. When enabled, it adds 3 styles for unordered lists and 6 styles for ordered lists to choose from. The styles can be changed via the dropdown that opens when you click the arrow next to the appropriate list button in the toolbar.

# Demo

Use the editor below to see the list style plugin in action.

Modern manned spacecraft

  1. Soyuz (Soviet/Russian)
    1. Early stage (all retired)
      1. 7K-OK
      2. 7KT-OK
      3. 7K-T
      4. 7K-TM
    2. Soyuz T (retired)
    3. Soyuz TM (retired)
    4. Soyuz TMA (retired)
    5. Soyuz TMA-M (retired)
    6. Soyuz MS
  2. STS orbiter (American; all retired)
    1. Columbia
    2. Challenger
    3. Discovery
    4. Atlantis
    5. Endeavour
  3. SpaceX Crew Dragon (American)
  4. Shenzhou (Chinese)

These features also provide similar functionality:

  • To-do lists – Create a list of interactive checkboxes with labels.
  • Block indentation – Set indentation for text blocks such as paragraphs or headings and lists.
  • Autoformatting – Format the text on the go with Markdown code.

# Installation

To add this feature to your editor, install the @ckeditor/ckeditor5-list package:

npm install --save @ckeditor/ckeditor5-list

Then add the ListStyle plugin to your plugin list and the toolbar configuration:

import ListStyle from '@ckeditor/ckeditor5-list/src/liststyle';

    .create( document.querySelector( '#editor' ), {
        plugins: [ ListStyle, ... ],
        toolbar: [ 'bulletedList', 'numberedList', ... ],
    } )
    .then( ... )
    .catch( ... );

Read more about installing plugins.

The ListStyle feature overrides UI button implementations from the ListUI.

# List indentation

Refer to the Indenting lists section of the Block indentation feature guide.

# Common API

The List plugin registers:

The ListStyle plugin registers:

  • The 'listStyle' command that accepts a type of the list style to set.

    editor.execute( 'listStyle', { type: 'decimal' } );

    The available types are:

    • For bulleted lists: 'disc', 'circle', and 'square'.
    • For numbered lists: 'decimal', 'decimal-leading-zero', 'lower-roman', 'upper-roman', 'lower-latin', and 'upper-latin'.
  • The 'numberedList' UI split button (it overrides the UI button registered by the List plguin.

  • The 'bulletedList' UI split button (it overrides the UI button registered by the List plguin.

# Contribute

The source code of the feature is available on GitHub in