---
title: "BulletList extension"
description: "Use the Bullet list extension to enable bullet lists in your Tiptap Editor. Learn more about lists in our docs!"
canonical_url: "https://tiptap.dev/docs/editor/extensions/nodes/bullet-list"
---

# BulletList extension

Use the Bullet list extension to enable bullet lists in your Tiptap Editor. Learn more about lists in our docs!

This extension enables you to use bullet lists in the editor. They are rendered as `<ul>` HTML tags. Type \* , -  or +  at the beginning of a new line and it will magically transform to a bullet list.

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

> **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 { BulletList } from '@tiptap/extension-list'

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

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
BulletList.configure({
  HTMLAttributes: {
    class: 'my-custom-class',
  },
})
```

### itemTypeName

Specify the list item name.

Default: `'listItem'`

```js
BulletList.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
BulletList.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
BulletList.configure({
  keepAttributes: true,
})
```

## Commands

### toggleBulletList()

Toggles a bullet list.

```js
editor.commands.toggleBulletList()
```

## Keyboard shortcuts

| Command          | Windows/Linux       | macOS           |
| ---------------- | ------------------- | --------------- |
| toggleBulletList | Control + Shift + 8 | Cmd + Shift + 8 |

## Source code

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

## Minimal Install

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

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