TOC Element

A table of contents component with links to document headings.

Basic Elements PluginToc Element

Installation

npx shadcx@latest add plate/toc-element

Examples

Table of Contents

Table of Contents

The Table of Contents (TOC) feature allows you to create an automatically updated overview of your document's structure.
How to use the Table of Contents:
  • Type "/toc" and press Enter to create the TOC.
  • The TOC updates automatically when you modify headings in the document.


Example Content

This is an example of content that would be reflected in the Table of Contents.

Subsection

Adding or modifying headings in your document will automatically update the TOC.

Benefits of Using TOC

A Table of Contents improves document navigation and provides a quick overview of your content structure.
Files
components/demo.tsx
'use client';

import React from 'react';

import { Plate } from '@udecode/plate-common/react';

import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = useCreateEditor({
    plugins: [...editorPlugins],
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

Plate Plus

  • Sticky TOC sidebar
  • Hover-to-expand: Opens automatically when you move your mouse over it
  • Interactive navigation: Click on items to smoothly scroll to the corresponding heading
  • Visual feedback: Highlights the current section in the sidebar
  • Beautifully crafted UI