TOC Base Kit

Component

About

A Plate editor plugin kit that registers a static table-of-contents element for server-side rendering of document headings.

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

Code

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

Usage.tsx

import { BaseTocKit } from "@/components/ui/toc-base-kit";

import * as React from "react";
import { createSlateEditor } from "platejs";
import { PlateStatic } from "platejs/static";

const editor = createSlateEditor({
  plugins: BaseTocKit,
  value: [
    { id: "toc", type: "toc", children: [{ text: "" }] },
    { id: "example", type: "h2", children: [{ text: "Example Content" }] },
    {
      type: "p",
      children: [
        {
          text: "This is an example of content that would be reflected in the Table of Contents.",
        },
      ],
    },
    { id: "subsection", type: "h3", children: [{ text: "Subsection" }] },
    {
      id: "benefits",
      type: "h2",
      children: [{ text: "Benefits of Using TOC" }],
    },
  ],
});

export default function TocBaseKitDemo() {
  return (
    <div className="mx-auto max-w-xl p-6">
      <PlateStatic editor={editor} />
    </div>
  );
}