Content widget
Table of Contents
A clickable outline of the page’s headings that highlights where the reader is.
Build it with your AI
“Add a table of contents of the h2 and h3 headings, sticky in the sidebar of long posts.”
Live demo
See it working
Table of contents
Settings
32 settings in three tabs
Every setting below is in the editor — and available to your AI through get_widget_schema.
Content
15 settings
Table of contents
Title
Title HTML tag
Headings to include
Container selector
Exclude selector
Marker
Nest sub-headings
Minimum headings
Behaviour
Collapsible
Start collapsed
Smooth scroll
Scroll offset (px)
Highlight the current section
Sticky
Sticky distance from top
Design
17 settings
Box
Background
Border
Border radius
Padding
Shadow
List max height
Title
Typography
Color
Divider color
Spacing
List
Typography
Space between items
Sub-level indent
Collapse icon color
Color
Marker color
Indicator color
Behaviour
shared
On every element
Spacing & position
Background & border
Animations
Motion & effects
Scroll & mouse effects
Visibility
Conditions
Interactions
Attributes & CSS
Build it with AI
Just describe what you want
Your AI looks up the Table of Contents settings over MCP and writes the element for you — real, editable and on brand.
Claude · connected to your site
You
Add a table of contents of the h2 and h3 headings, sticky in the sidebar of long posts.
Claude · using Uncoder
Done — it’s on your site and fully editable.
What the AI writes
{ "type": "table-of-contents", "settings": { } }More content widgets
Works well with
Breadcrumbs
Shows visitors where they are — Home › Blog › Post — and tells Google too, with structured data.
Code Highlight
Code in a tidy block with a file name, line numbers, highlighted lines and a copy button.
Loop Carousel
Your posts, products or any content, in a carousel of cards you design yourself.
Loop Grid
Your posts, products or any content in a grid of cards you design yourself, with pagination or load more.
Posts
A ready-made grid or list of posts with images, dates and excerpts.
Steps
A “How it works” row of numbered steps joined by a line.