List

Text 1

About

Renders ordered and to-do list items with checkboxes inside a Plate rich-text editor.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds List to your project and fits it to your theme.

Code

How List is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { BlockList } from "@/components/ui/block-list";
import { ListPlugin } from "@platejs/list/react";
import { Plate, PlateContent, usePlateEditor } from "platejs/react";

const initialValue = [
  {
    type: "p",
    children: [{ text: "To-do list" }],
  },
  {
    type: "p",
    listStyleType: "todo",
    checked: true,
    children: [{ text: "Set up the Plate editor" }],
  },
  {
    type: "p",
    listStyleType: "todo",
    checked: false,
    children: [{ text: "Add the list plugin" }],
  },
  {
    type: "p",
    children: [{ text: "Ordered list" }],
  },
  {
    type: "p",
    listStyleType: "decimal",
    listStart: 1,
    children: [{ text: "First item" }],
  },
  {
    type: "p",
    listStyleType: "decimal",
    listStart: 2,
    children: [{ text: "Second item" }],
  },
];

export default function BlockListDemo() {
  const editor = usePlateEditor({
    plugins: [
      ListPlugin.configure({
        render: { belowNodes: BlockList },
      }),
    ],
    value: initialValue,
  });

  return (
    <div className="mx-auto w-full max-w-xl p-6">
      <Plate editor={editor}>
        <PlateContent
          className="min-h-40 rounded-md border p-4 pl-10 text-sm outline-none"
          placeholder="Type…"
        />
      </Plate>
    </div>
  );
}