Skip to main content
Auto-generated table of contents from document headings. 
<TableOfContents />

​
Props

PropTypeDefaultDescription
titlestring"Table of Contents"TOC heading
levelsnumber3Max heading level (1-6)
showPageNumbersbooleantrueDisplay page numbers
hyperlinksbooleantrueMake entries clickable
classNamestring—Tailwind classes for title

​
Basic usage

<Document>
  <Section>
    <TableOfContents />
  </Section>

  <Section>
    <H1>Introduction</H1>
    <Paragraph>...</Paragraph>

    <H2>Background</H2>
    <Paragraph>...</Paragraph>

    <H1>Methods</H1>
    <Paragraph>...</Paragraph>
  </Section>
</Document>
Generates: 
Table of Contents

Introduction .................. 1
  Background .................. 1
Methods ....................... 2

​
Custom title

<TableOfContents title="Contents" />
<TableOfContents title="In This Document" />
No title: 
<TableOfContents title="" />

​
Heading levels

Control how deep the TOC goes: 
// Only H1
<TableOfContents levels={1} />

// H1 and H2
<TableOfContents levels={2} />

// H1, H2, and H3 (default)
<TableOfContents levels={3} />

// All levels
<TableOfContents levels={6} />

​
Page numbers

// With page numbers (default)
<TableOfContents showPageNumbers={true} />

// Without page numbers
<TableOfContents showPageNumbers={false} />

// Clickable entries (default)
<TableOfContents hyperlinks={true} />

// Plain text entries
<TableOfContents hyperlinks={false} />

​
Styling

Style the title: 
<TableOfContents
  title="Contents"
  className="text-2xl font-bold text-blue-700"
/>

​
Full example

<Document>
  {/* TOC on its own page */}
  <Section>
    <TableOfContents
      title="Contents"
      levels={3}
      showPageNumbers={true}
      hyperlinks={true}
      className="text-xl font-bold"
    />
  </Section>

  {/* Document content */}
  <Section>
    <H1>Executive Summary</H1>
    <Paragraph>...</Paragraph>

    <H1>Introduction</H1>
    <H2>Purpose</H2>
    <Paragraph>...</Paragraph>
    <H2>Scope</H2>
    <Paragraph>...</Paragraph>

    <H1>Analysis</H1>
    <H2>Data Collection</H2>
    <H3>Survey Results</H3>
    <Paragraph>...</Paragraph>
    <H3>Interview Findings</H3>
    <Paragraph>...</Paragraph>

    <H1>Conclusion</H1>
    <Paragraph>...</Paragraph>
  </Section>
</Document>

​
How it works

  1. Scans document for H1-H6 headings
  2. Filters by levels prop
  3. Generates entries with indentation based on heading level
  4. Adds page numbers via Word’s PAGEREF field
  5. Creates hyperlinks to heading bookmarks
Headings automatically get bookmark IDs. No manual id props needed for TOC.

​
Updating the TOC

The TOC uses Word’s native field. To update page numbers after editing:
  • In Word: Right-click TOC → “Update Field”
  • Or: Ctrl+A, then F9