Table of Contents

Automatically generate a reactive, scroll-spy capable Table of Contents sidebar for your documents.

Overview

Edra uses the @tiptap-pro/extension-table-of-contents (or its open-source equivalent logic) to extract hierarchical headers from the document. The editor state tracks all h1, h2, h3, and h4 tags, mapping them to their respective positions in the document.

To visualize this data, Edra provides a fully-styled ToC component that you can place anywhere in your layout (usually in a sidebar beside the editor).

Usage

Import the ToC component from the Edra package:

Simply pass your instantiated editor object as a prop to the ToC component. It will automatically listen for document updates, regenerate the outline, and apply active styling to the heading currently visible in the viewport (Scroll Spy).