---
title: "OrderedList extension"
description: "Use the Ordered List extension in Tiptap to enable ordered lists rendered as HTML tags. Learn more in our docs!"
canonical_url: "https://tiptap.dev/docs/editor/extensions/nodes/ordered-list"
---

# OrderedList extension

Use the Ordered List extension in Tiptap to enable ordered lists rendered as HTML tags. Learn more in our docs!

This extension enables you to use ordered lists in the editor. They are rendered as `<ol>` HTML tags.

Type 1.  (or any other number followed by a dot) at the beginning of a new line and it will magically transform to a ordered list.

> **Interactive demo:** [OrderedList](https://embed.tiptap.dev/preview/Nodes/OrderedList)

> **Modify backspace behavior:**
>
> If you want to modify the standard behavior of backspace and delete functions for lists, you
> should read about the [ListKeymap](https://tiptap.dev/docs/editor/extensions/functionality/listkeymap.md) extension.

## Install

```bash
npm install @tiptap/extension-list
```

This extension requires the [`ListItem`](https://tiptap.dev/docs/editor/extensions/nodes/list-item.md) node.

## Usage

```js
import { Editor } from '@tiptap/core'
import { OrderedList } from '@tiptap/extension-list'

new Editor({
  extensions: [OrderedList],
})
```

This extension is installed by default with the `ListKit` extension, so you don’t need to install it separately.

```ts
import { Editor } from '@tiptap/core'
import { ListKit } from '@tiptap/extension-list'

new Editor({
  extensions: [ListKit],
})
```

## Settings

### HTMLAttributes

Custom HTML attributes that should be added to the rendered HTML tag.

```js
OrderedList.configure({
  HTMLAttributes: {
    class: 'my-custom-class',
  },
})
```

### itemTypeName

Specify the list item name.

Default: `'listItem'`

```js
OrderedList.configure({
  itemTypeName: 'listItem',
})
```

### keepMarks

Decides whether to keep the marks from a previous line after toggling the list either using `inputRule` or using the button

Default: `false`

```js
OrderedList.configure({
  keepMarks: true,
})
```

### keepAttributes

Decides whether to keep the attributes from a previous line after toggling the list either using `inputRule` or using the button

Default: `false`

```js
OrderedList.configure({
  keepAttributes: true,
})
```

## Commands

### toggleOrderedList()

Toggle an ordered list.

```js
editor.commands.toggleOrderedList()
```

## Keyboard shortcuts

| Command           | Windows/Linux       | macOS           |
| ----------------- | ------------------- | --------------- |
| toggleOrderedList | Control + Shift + 7 | Cmd + Shift + 7 |

## Source code

[packages/extension-list/src/ordered-list/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-list/src/ordered-list/)

## Minimal Install

```js
import { Editor } from '@tiptap/core'
import { OrderedList } from '@tiptap/extension-list/ordered-list'

new Editor({
  extensions: [OrderedList],
})
```