Contribute to this guide

guideOrdered and unordered lists

The list feature lets you create ordered (numbered) and unordered (bulleted) lists. The unique thing about them is that you can put any content inside each list item (including block elements like paragraphs and tables), retaining the continuity of numbering and indentation.

Since version 41.0.0, the list support plugin has changed for CKEditor 5. You can read more about this change in the Update to CKEditor 41.0.0 guide.

# Demo

Use the editor below to see the list feature in action. You can use toolbar buttons to insert both ordered Insert ordered list and unordered lists Insert unordered list.

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. or 1) followed by a space for a numbered list.

Top five places to visit this summer

...and stay on the budget.

  1. Gran Canaria, Spain

    Gran Canaria is a popular tourist destination. The island is often called “a miniature continent”. This is because it offers a great variety of climates and landscapes, from golden sandy beaches through rocky ravines and white dunes to charming villages. In the mid-2010s, over 3.5 million tourists visited Gran Canaria each year.

  2. Florence, Italy

    Florence, established in 59 BC by Julius Caesar himself got its name from two rivers that surrounded the settlement. Thanks to centuries of history, the capital of Tuscany has plenty to offer to tourists hungry for sightseeing. Some of the most interesting places to visit include:

    Florence is also regarded as one of the top 15 fashion capitals of the world.

  3. Porto, Portugal

    Porto, located at the Duero river estuary in northern Portugal, is the country’s second-largest city. It is regarded as one of the oldest European centers, which was recognized in 1996 when deemed the city’s historic center a World Heritage Site.

    The old town of Porto is a UNESCO World Heritage site.

    In 2014 and 2017, Porto was elected The Best European Destination by the Best European Destinations Agency. The city is also home to the Porto School of Architecture, one of the most prestigious architecture schools in the world.

  4. Budapest, Hungary

    The capital of Hungary, a spa city sitting across the Danube river, is alive with Roman, Turkish, and European history and cultural heritage. Thermal baths, the picturesque river, and the Gellért Hill citadel are only a few things worth considering while planning your trip to Hungary.

    They said that, of course, Budapest is beautiful. But it is in fact almost ludicrously beautiful. – Anthony Bourdain

  5. The Peloponnese, Greece

    The Peloponnese peninsula was already inhabited in prehistoric times. During the bronze age, the first European highly developed culture – the Mycenaean civilization – started there. Roman, Byzantine, Slavic, and Ottoman rules left a significant mark on the place with numerous architectural and cultural relics worth visiting to this day.

This demo presents a limited set of features. Visit the feature-rich editor example to see more in action.

# List properties

Besides the basic functionality of creating ordered and unordered lists, CKEditor 5 offers formatting tools that let you control the lists. You can enable features such as more styles for list markers, setting the start index, or reversing the list order separately or all at once. Check out the individual demos below or see all list properties working together in the full-featured editor example.

# 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. It opens when you click the arrow next to the appropriate list button in the toolbar.

# Demo

In the editor below, use the ordered Insert ordered list or unordered list dropdown Insert unordered list to choose the desired marker type for each list.

Historical and modern manned spacecraft

  1. Soyuz (Soviet/Russian)
    1. The 7K early line (all retired)
      1. 7K-OK
      2. 7KT-OK
      3. 7K-T
      4. 7K-TM
    2. Soyuz T (retired)
    3. Soyuz TM and further modifications (retired)
    4. 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)
Items in bold denote craft currently in use as of 2022.

# 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). Sometimes you may want to start a list with some other digit or letter, though.

When this feature is enabled, an extra 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. To achieve continuous numbering of all spaceships from the example, go to the first item of the last list. Then use the ordered list Insert ordered list dropdown input field to set the start index.

A list of human spacecraft

Soviet and Russian spaceships:

  1. Vostok
  2. Voskhod
  3. Soyuz
  4. Progress (cargo)

American spaceships:

  1. Mercury
  2. Gemini
  3. Apollo
  4. space shuttle
  5. Dragon

Chinese spaceships:

  1. Shenzhou
  2. 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 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 extra dropdown switch is available in the ordered list toolbar button. Thanks to it, the user may reverse the order of a list with a single click.

# Demo

Click the second list and use the ordered list Insert ordered list dropdown switch to choose whether to reverse the numbering order.

Replacing the screen of your Nintendo Game Boy

Game Boy Color, a spudger and a triwing screwdriver.

Disassembling the console

  1. Remove the game cartridge from the slot. Open the battery compartment and remove the batteries.
  2. Remove the six triwing (Y-type screwdriver needed) screws located at the top and middle of the back case and inside the battery compartment.
  3. Separate the front and back case halves. Be extra careful not to pull the cable ribbon that connects both parts. Detach the ribbon carefully.
  4. Remove the ten Philips screws holding the mainboard to the front case. Carefully take the mainboard out of the case.
  5. Detach three plastic clips on the backside of the board and remove two Philips screws on the front, below the screen.
  6. Desolder the display connectors from the mainboard.

Reassembling the console

  1. Solder the display connector to the mainboard.
  2. Fasten the two screws below the screen and reattach three plastic clips on the backside of the mainboard
  3. Put the mainboard carefully inside the front case and screw in ten Philips screws holding the mainboard.
  4. Reattach the main cable ribbon to the back casing and put the case halves together.
  5. Fasten the six triwing screws inside the battery compartment and on the back of the case.
  6. 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 Feature-rich editor and Document editor examples.

# Installation

⚠️ New import paths

Starting with version 42.0.0, we changed the format of import paths. This guide uses the new, shorter format. Refer to the Packages in the legacy setup guide if you use an older version of CKEditor 5.

The List plugin provides the ordered (numbered) and unordered (bulleted) features for CKEditor 5. Additional list properties, such as list marker styles, start index, or reversed list order, are provided by the ListProperties plugin.

# List feature

After installing the editor, add the feature to your plugin list and toolbar configuration:

import { List } from 'ckeditor5';

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

# List properties

After installing the editor, add ListProperties to your plugin list and toolbar configuration:

To enable selected sub-features of the list properties, add their configuration to your editor. Set true for each feature you want to enable:

import { ListProperties } from 'ckeditor5';

    .create( document.querySelector( '#editor' ), {
        plugins: [ ListProperties, /* ... */ ],
        toolbar: [ 'bulletedList', 'numberedList', /* ... */ ],
        list: {
            properties: {
                styles: true,
                startIndex: true,
                reversed: true
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

The ListProperties feature overrides UI button implementations from the ListUI.

These CKEditor 5 features provide similar functionality:

  • To-do lists – Create a list of interactive checkboxes with labels.
  • Multi-level lists – Multi-level lists allow the user to set different markers (symbols, text or numbers) to display at each level of the list.
  • 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 ListProperties plugin registers:

  • The listStyle command. It accepts the type of the list style to set. If not set, it 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'.
  • The listStart command. It is a number and defaults to 1 (meaning a list starts with 1). If enabled, it accepts a numerical value for the start attribute.

    editor.execute( 'listStart', { startIndex: 3 } );
  • The listReversed command. It is a Boolean and defaults to false (meaning the list order is ascending).

    editor.execute( 'listReversed', { reversed: true } );
  • The numberedList UI split button. It overrides the UI button registered by the List plugin.

  • The bulletedList UI split button. It overrides the UI button registered by the List plugin.

# Contribute

The source code of the feature is available on GitHub at