Structure blog content with headings in Payload

Generate an outline (Table of Contents) automatically

If you’re using Next.js (most Payload templates do)

Step 1: Extract headings from content

When rendering the blog post, parse the content and collect headings.

If you’re using Lexical / RichText JSON, you can extract headings like this:

1function extractHeadings(content) {
2  const headings = []
3
4  const traverse = (nodes) => {
5    nodes.forEach(node => {
6      if (node.type === 'heading') {
7        headings.push({
8          text: node.children?.map(c => c.text).join(''),
9          level: node.tag, // h2, h3
10        })
11      }
12      if (node.children) traverse(node.children)
13    })
14  }
15
16  traverse(content.root.children)
17  return headings
18}
19