Finsweet Attributes: Table of Contents Webflow integration

How to integrate Finsweet Attributes: Table of Contents with Webflow

What is Finsweet Attributes: Table of Contents? It is a free, client-side solution that reads the heading elements inside a Webflow Rich Text Block or Div Block and builds a linked table of contents from them. Nothing is stored and no data leaves the browser, so it never syncs with an external service and never calls Webflow's APIs.

The Table of Contents solution needs one script in the page head plus a short set of custom attributes that you set on elements inside Webflow. That is the whole integration: no app to install, no account to connect.

Version matters more here than with most scripts. The current release is Attributes V2, which loads every solution from one universal library file. The older release was renamed Attributes Legacy (V1), and the two cannot run on the same page. Everything below is V2 syntax.

Add the script and configure attributes

The setup runs entirely inside Webflow once the script tag is in place. Add the library to your page head code, then mark up which element holds your headings and which element acts as the link template.

Add this to your page's Custom Code section under Head Code, or to Site settings if you want it on every page:

<script async type="module" src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js" fs-toc></script>

The fs-toc flag on the script tag is what tells the universal library to load this particular solution. Then apply these attributes in the Element settings panel:

• Content container: Add fs-toc-element="contents" to the Rich Text Block or Div Block that holds the headings you want listed.
• Link template: Add fs-toc-element="link" to the Link Block or Text Link that the solution clones once per heading it finds.
• Table wrapper: Add fs-toc-element="table" to the element that should receive the generated links, which is optional because the solution otherwise uses the link template's parent.
• Interaction trigger: Add fs-toc-element="ix-trigger" to a Div inside a heading wrapper when you want a Webflow interaction to fire as that section becomes active.

All four go in the custom attributes area of the Element settings panel, so the only code you write is the script tag itself. The solution then reads H2 to H6 headings inside the contents element and populates your link template. H1 is skipped on purpose, since it belongs to the page title rather than to a section.

Four optional settings cover the behavior most pages end up adjusting:

• fs-toc-offsettop: Takes a CSS length such as 80px and stops the scroll that far above the target heading, which is what a fixed header needs.
• fs-toc-offsetbottom: Takes a CSS length and applies the same breathing room below the target heading during scroll.
• fs-toc-hideurlhash: Set it to true to keep the heading anchor out of the browser address bar when a reader clicks an entry.
• fs-toc-anchor: Sets a custom anchor ID on one heading instead of letting the solution derive an ID from the heading text.

The first three sit on the contents element, while fs-toc-anchor goes on the individual heading. Two inline markers control the table itself: put [fs-toc-omit] in a heading's text to keep that heading out of the list, or [fs-toc-h3] to render it at a different nesting level. Both markers are stripped from the visible heading text.

Generated links work with Webflow's native Current state, so the active entry picks up the w--current class as the reader scrolls. Select the link element, switch to the Current state in the Style panel, and style it there.

One thing to plan for: custom code does not execute on the Webflow canvas or in preview, so the table looks empty until you publish. Test the navigation on a staging or production publish rather than in the editor, and treat a blank table in preview as expected rather than as a bug.

Run more than one table of contents on a page

A page with two independent content areas needs two tables, and instance names are how you pair each table with its content. Every element belonging to one table shares the same fs-toc-instance value.

For a footer table sitting alongside the main one:

<div fs-toc-element="contents" fs-toc-instance="footer">
  <h2>Section heading</h2>
</div>

<div fs-toc-element="table" fs-toc-instance="footer">
  <a fs-toc-element="link" fs-toc-instance="footer" href="#">Section heading</a>
</div>

This is where older tutorials will lead you wrong. Attributes V1 separated instances with numbered suffixes on the attribute values, such as contents-1 and contents-2. V2 replaced that with fs-toc-instance, so any guide still showing suffixed values is teaching legacy syntax that the V2 library will not read.

Implement with CMS template pages

The solution reads a CMS Rich Text field exactly as it reads a static one, with one hard limit worth knowing before you design the page: it builds a table from a single content element, never from several.

For a Collection template page:

1. Apply fs-toc-element="contents" to the Rich Text element or Div Block that holds the headings.
2. Add a link element carrying fs-toc-element="link" to act as the template for each generated entry.
3. Publish and test against real Collection content, because the script only runs on a published site.
4. If headings go undetected, check whether your content structure adds wrapper elements between the contents element and the headings themselves.

Finsweet documents that a single table cannot be generated from several Rich Text elements, and a long-running Finsweet community thread collects the CMS Rich Text failure modes people run into. For content managed in Webflow CMS, the reliable pattern is one contents element per template page.

Add interaction triggers

The solution can drive Webflow interactions as each section becomes active. Add a Div inside your heading wrapper, apply fs-toc-element="ix-trigger" to it, then build the interaction against that element. This suits teams already comfortable building interactions. If that is not you, styling the Current state gets most of the same effect for far less work.

What you can build with Finsweet Table of Contents and Webflow

Long pages get the most out of this, because the table is derived from headings that already exist rather than maintained by hand next to them. Rename a section and the entry renames itself.

Common builds include:

• Documentation with nested navigation: Generate a sidebar that mirrors each article's heading hierarchy, so a writer can restructure a page without editing navigation.
• Blog posts with a sticky outline: Pin the table beside a long article and let the Current state show readers exactly where they are in it.
• Course and lesson pages: Give learners an outline of every section in a module plus a way to jump straight back to one they want to review.
• Knowledge base articles: Let support readers scan a page's structure first and go directly to the part that answers their question.

Each of these depends on the same script landing in the right place, which is worth getting right once rather than page by page. Our walkthrough on applying custom code by API covers pushing that head code across many pages programmatically.

Heading structure is also the thing most likely to break a generated table once a content set gets large. Connect the Webflow MCP server and have an agent audit heading levels across your Collections, then correct the pages where the hierarchy has drifted.