Skip to main content
The BulletList extension allows you to create unordered bullet lists. It requires the ListItem extension to function properly.

​
Installation

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

​
Usage

The BulletList 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 BulletList from '@tiptap/extension-bullet-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,
    BulletList,
    ListItem,
  ],
})

​
Configuration

​
itemTypeName

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

​
HTMLAttributes

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

​
keepMarks

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

​
keepAttributes

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

​
Commands

​
toggleBulletList

Toggles a bullet list. If the current node is already a bullet list, it converts it to paragraphs. 
editor.commands.toggleBulletList()

​
Keyboard Shortcuts

  • Mod-Shift-8: Toggle bullet list

​
Input Rules

The BulletList extension supports Markdown-style input rules:
  • Type - followed by a space to create a bullet list
  • Type * followed by a space to create a bullet list
  • Type + followed by a space to create a bullet list

​
Source Code

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

Build docs developers (and LLMs) love

Get started for freeTalk to us