Table of Contents

Extract headings from MDX to build a table of contents.

Get TOC

const { toc } = await docs.parse({ slug: "intro" });

console.log(toc);
// [{ value: "Intro", depth: 1, href: "#intro" }, ...]

TOC Item Structure

interface TocItem {
  value: string; // Heading text
  depth: 1 | 2 | 3 | 4 | 5 | 6; // Heading level
  href: string; // Anchor link (e.g. "#intro")
}

Render TOC

function TableOfContents({ toc }: { toc: TocItem[] }) {
  return (
    <nav>
      <ul>
        {toc.map((item) => (
          <li key={item.href} style={{ paddingLeft: (item.depth - 1) * 16 }}>
            <a href={item.href}>{item.value}</a>
          </li>
        ))}
      </ul>
    </nav>
  );
}

Standalone TOC

Extract TOC without parsing full MDX:

const toc = await docs.getToc({ slug: "intro" });