list-kit.mdx

title	tags	meta	extension
ListKit extension	type src url label image https://img.shields.io/npm/v/@tiptap/extension-list/beta?label=version https://www.npmjs.com/package/@tiptap/extension-list Version type src url label image https://img.shields.io/npm/dm/@tiptap/extension-list.svg https://npmcharts.com/compare/@tiptap/extension-list?minimal=true Downloads	title description category ListKit extension | Tiptap Editor Docs All necessary list extensions in one extension with ListKit. Perfect for quickly setting up lists with Tiptap. More in the docs! Editor	name link description type icon ListKit https://github.com/ueberdosis/tiptap/tree/main/packages/extensions-list All necessary list extensions in one. It doesn’t get much better than this. extension Package

The ListKit is a collection of all necessary Tiptap list extensions. If you quickly want to setup lists in Tiptap, this extension is for you.

Install

npm install @tiptap/extension-list

Included extensions

Nodes

• BulletList
• ListItem
• OrderedList
• TaskItem
• TaskList

Extensions

• ListKeymap

Source code

packages/extension-list/

Using the ListKit extension

Pass ListKit to the editor to load all included extension at once.

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

const editor = new Editor({
  extensions: [ListKit],
})

You can configure the included extensions, or even disable a few of them, like shown below.

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

const editor = new Editor({
  extensions: [
    ListKit.configure({
      // Disable an extension
      bulletList: false,

      // Configure an extension
      listItem: {
        HTMLAttributes: { class: 'list-item' },
      },
    }),
  ],
})