Ordered and unordered lists
The list feature lets you create ordered (numbered) and unordered (bulleted) lists. You can use ordered lists where the order of the items matters (as in instructions) and unordered lists where it is not that important (as in a list of ingredients).
# Demo
Use the editor below to see the list feature in action. You can use toolbar buttons to insert both ordered
and unordered lists .You can also use Markdown code recognized by the autoformatting feature:
- Start a line with
*
or-
followed by a space for a bulleted list. - Start a line with
1.
or1)
followed by a space for a numbered list.
Ingredients

Ingredients required for making a cup of coffee:
- 15 g ground coffee
- water
- milk (optional)
Instructions
How to prepare a cup of coffee:
- Gather the ingredients.
- Put 15 g of ground coffee in the cup.
- Boil 200 ml of water.
- Pour the water into the cup.
- Optional: Add milk.
This demo only presents a limited set of features. Visit the full-featured editor example to see more in action.
After reading this guide, check out the Lists in CKEditor 5 blog post where you will find more information about lists with examples.
# List properties
In addition to the basic functionality of creating the ordered and unordered lists, CKEditor 5 offers formatting tools that let you control the lists. Features such as more styles for list markers, setting the start index, or reversing the list order can be enabled separately or all at once. Check out the individual demos below or see all list properties working together in the full-featured editor example.
The list properties feature is enabled by default in the document editor build only.
The document list properties feature is not available in any builds by default.
See the installation section to learn how to enable these in your editor.
# 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 user will be able to set or change the list style via the dropdown that opens when you click the arrow next to the appropriate list button in the toolbar.
# Demo
In the editor below, use the ordered
or unordered list dropdown to choose the desired marker type for each list.Historical and modern manned spacecraft
- Soyuz (Soviet/Russian)
- The 7K early line (all retired)
- 7K-OK
- 7KT-OK
- 7K-T
- 7K-TM
- Soyuz T (retired)
- Soyuz TM and further modifications (retired)
- Soyuz MS
- STS orbiter (American; all retired)
- Columbia
- Challenger
- Discovery
- Atlantis
- Endeavour
- SpaceX Crew Dragon (American)
- Shenzhou (Chinese)
# List start index
The list start index feature allows the user to choose the starting point of an ordered list. By default, this would be 1
(or A
, or I
— see the list styles section), but in certain situations it may be desired to start a list with some other digit or letter.
When this feature is enabled, an additional dropdown option is available in the ordered list toolbar button. Thanks to it, the user may set or change the starting marker.
# Demo
In the editor below, notice how the ordering continues in the second list. For continuous numbering of spaceships, go to the first item of the last list. Then use the ordered list
dropdown input field to set the start index.A list of human spacecraft
Soviet and Russian spaceships:
- Vostok
- Voskhod
- Soyuz
- Progress (cargo)
American spaceships:
- Mercury
- Gemini
- Apollo
- space shuttle
- Dragon
Chinese spaceships:
- Shenzhou
- Tianzhou (cargo)
# Reversed list
The reversed list feature lets the user reverse the numbering order of a list, changing it from ascending to descending. This is especially useful in countdowns and things-to-do lists that need to reproduce steps in a reversed order (for example, in disassembly instructions).
When this feature is enabled, an additional dropdown switch is available in the ordered list toolbar button. Thanks to it, the user may easily reverse the order of a list with a single click.
# Demo
Click the second list and use the ordered list
dropdown switch to choose whether the numbering order should be reversed.Replacing the screen of your Nintendo Game Boy

Disassembling the console
- Remove the game cartridge from the slot. Open the battery compartment and remove the batteries.
- Remove the six triwing (Y-type screwdriver needed) screws located at the top and middle of the back case and inside the battery compartment.
- Separate the front and back case halves. Be extra careful not to pull the cable ribbon that connects both parts. Detach the ribbon carefully.
- Remove the ten Philips screws holding the mainboard to the front case. Carefully take the mainboard out of the case.
- Detach three plastic clips on the backside of the board and remove two Philips screws on the front, below the screen.
- Desolder the display connectors from the mainboard.
Reassembling the console
- Solder the display connector to the mainboard.
- Fasten the two screws below the screen and reattach three plastic clips on the backside of the mainboard
- Put the mainboard carefully inside the front case and screw in ten Philips screws holding the mainboard.
- Reattach the main cable ribbon to the back casing and put the case halves together.
- Fasten the six triwing screws inside the battery compartment and on the back of the case.
- Reload three AA-size batteries, close the compartment cover, and insert your favorite game cartridge to play!
You can see all the list properties together in action in the Full-featured editor and Document editor examples.
# List indentation
Refer to the Indenting lists section of the Block indentation feature guide.
# Installation
There are currently two plugins providing lists support for CKEditor 5: this regular lists feature and the new document lists feature, based on a different approach.
The lists feature is enabled by default in all predefined builds.
If you wish to switch to the document list feature, you need to install it first.
# List feature
The base list feature is enabled by default in all predefined editor builds. The installation instructions are for developers interested in building their own, custom editor.
To add this feature to your editor, install the @ckeditor/ckeditor5-list
package:
npm install --save @ckeditor/ckeditor5-list
Then add the List
plugin to your plugin list and the toolbar configuration:
import List from '@ckeditor/ckeditor5-list/src/list';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ List, /* ... */ ],
toolbar: [ 'bulletedList', 'numberedList', /* ... */ ]
} )
.then( /* ... */ )
.catch( /* ... */ );
# List properties
The list properties feature is enabled by default in the document editor build only.
To enable the list properties feature, install the @ckeditor/ckeditor5-list
package:
npm install --save @ckeditor/ckeditor5-list
Then add the ListProperties
plugin to your plugin list and configure the toolbar. To enable selected sub-features of the list properties, you need to add their configuration to your editor (set true
for each feature you want to enable):
import ListProperties from '@ckeditor/ckeditor5-list/src/listproperties';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ ListProperties, ... ],
toolbar: [ 'bulletedList', 'numberedList', ... ],
list: {
properties: {
styles: true,
startIndex: true,
reversed: true
}
}
} )
.then( ... )
.catch( ... );
Read more about installing plugins.
The ListProperties
feature overrides UI button implementations from the ListUI
.
# Related features
These features 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.
# Common API
The List
plugin registers:
- The
'numberedList'
command. - The
'bulletedList'
command. - The
'indentList'
command. - The
'outdentList'
command. - The
'numberedList'
UI button. - The
'bulletedList'
UI button.
The ListProperties
plugin registers:
-
The
listStyle
command that accepts thetype
of the list style to set. If not set, is uses the default marker (usually decimal).editor.execute( 'listStyle', { type: 'lower-roman' } );
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'
.
- For bulleted lists:
-
The
listStart
command which is a Number and defaults to1
(meaning a list starts with1
). If enabled, it accepts a numerical value for thestart
attribute.editor.execute( 'listStart', { startIndex: 3 } );
-
The
listReversed
command which is a Boolean and defaults tofalse
(meaning the list order is ascending).editor.execute( 'listReversed', { reversed: true } );
-
The
numberedList
UI split button that overrides the UI button registered by theList
plugin. -
The
bulletedList
UI split button that overrides the UI button registered by theList
plugin.
# Contribute
The source code of the feature is available on GitHub at https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-list.
Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.