Skip to main content
The OrderedList extension allows you to create ordered numbered lists. It requires the ListItem extension to function properly and supports custom start numbers.

​
Installation

npm install @tiptap/extension-ordered-list @tiptap/extension-list-item

​
Usage

The OrderedList extension is included in the StarterKit by default: 
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

const editor = new Editor({
  extensions: [StarterKit],
})
To use it standalone: 
import { Editor } from '@tiptap/core'
import Document from '@tiptap/extension-document'
import OrderedList from '@tiptap/extension-ordered-list'
import ListItem from '@tiptap/extension-list-item'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'

const editor = new Editor({
  extensions: [
    Document,
    Paragraph,
    Text,
    OrderedList,
    ListItem,
  ],
})

​
Configuration

​
itemTypeName

The node name for list items.
​
itemTypeName
string
default:"'listItem'"
Specifies which node type to use for list items.
OrderedList.configure({
  itemTypeName: 'listItem',
})

​
HTMLAttributes

Custom HTML attributes to add to the ordered list element.
​
HTMLAttributes
Record<string, any>
default:"{}"
Custom HTML attributes that should be added to the rendered HTML tag.
OrderedList.configure({
  HTMLAttributes: {
    class: 'my-ordered-list',
  },
})

​
keepMarks

Keep marks when splitting the list.
​
keepMarks
boolean
default:"false"
Whether to preserve text marks when creating new list items.
OrderedList.configure({
  keepMarks: true,
})

​
keepAttributes

Keep attributes when splitting the list.
​
keepAttributes
boolean
default:"false"
Whether to preserve attributes when creating new list items.
OrderedList.configure({
  keepAttributes: true,
})

​
Attributes

The OrderedList node supports the following attributes:

​
start

The starting number for the list. 
editor.commands.insertContent({
  type: 'orderedList',
  attrs: { start: 5 },
  content: [
    // list items...
  ],
})

​
type

The list marker type (e.g., ‘1’, ‘a’, ‘A’, ‘i’, ‘I’). 
editor.commands.insertContent({
  type: 'orderedList',
  attrs: { type: 'a' },
  content: [
    // list items...
  ],
})

​
Commands

​
toggleOrderedList

Toggles an ordered list. If the current node is already an ordered list, it converts it to paragraphs. 
editor.commands.toggleOrderedList()

​
Keyboard Shortcuts

  • Mod-Shift-7: Toggle ordered list

​
Input Rules

The OrderedList extension supports Markdown-style input rules:
  • Type 1. followed by a space to create an ordered list
  • Type any number followed by . and a space (e.g., 5.) to create a list starting at that number

​
Source Code

View the source code on GitHub: packages/extension-list/src/ordered-list/ordered-list.ts

Build docs developers (and LLMs) love

Get started for freeTalk to us