Tiptap Docs

Add a list node UI component

Styling for various list types in the Tiptap editor, including ordered lists, unordered lists, and task lists.

Install

You can add the node component via Tiptap CLI (for Vite or Next.js)

npx @tiptap/cli add list-node

Manual Integration

For frameworks other than Vite or Next.js, add the node component manually from the open-source repository.

Import styles

This component requires you to import our styles which were added to styles/keyframe-animation.scss and styles/_variables.scss.

Usage

The ListNode provides styling for different types of lists within the editor. To use it, include it in your project and ensure you're using the list extensions from Tiptap.

import { useEditor, EditorContent } from '@tiptap/react'
import { TaskList } from '@tiptap/extension-task-list'
import { TaskItem } from '@tiptap/extension-task-item'
import { StarterKit } from '@tiptap/starter-kit'

import '@/components/tiptap-node/list-node/list-node.scss'

export default function EditorWithLists() {
  const editor = useEditor({
    extensions: [
      StarterKit,
      TaskList,
      TaskItem.configure({
        nested: true,
      }),
    ],
    content: `
      <ul>
        <li>Unordered list item</li>
        <li>Another unordered item</li>
      </ul>

      <ol>
        <li>Ordered list item</li>
        <li>Another ordered item</li>
      </ol>

      <ul data-type="taskList">
        <li data-type="taskItem" data-checked="true">Completed task</li>
        <li data-type="taskItem" data-checked="false">Pending task</li>
      </ul>
    `,
  })

  return <EditorContent editor={editor} />
}

Features

  • Consistent styling for ordered lists, unordered lists, and task lists
  • Proper nesting with appropriate indentation
  • Custom checkbox styling for task lists
  • Interactive checkboxes that respond to clicks
  • Visual strikethrough for completed tasks
  • Dark mode support

Requirements

Open source feature(s)