UI • v1.0.0

@synqro/summary

Auto-generate a table of contents with scroll tracking.

Scans a content zone for headings, clones a template item, and generates clickable links with smooth scroll. An IntersectionObserver highlights the active heading as the user scrolls.

Install • Paste in Project Settings → Custom Code → Footer

HTML

<!-- [Synqro Labs] Summary -->
<script src="https://cdn.jsdelivr.net/npm/@synqro/summary@1/dist/index.min.js"></script>

Installation

1
Add the script to your Webflow project. Go to Project Settings → Custom Code → Footer Code and paste the snippet above.
2
Add the custom attributes to the relevant elements in the Webflow designer — see the table below.
3
Publish your site. The script initializes automatically on DOMContentLoaded.

Configuration

Select the element in the Webflow designer and add these custom attributes under the Element Settings panel.

Attribute	Value	Description
Required	`(empty) or ID`	Container for the generated items. Add an ID value to pair with a specific content zone.
Required	`(empty) or ID`	The article content zone. Must match the list ID if you use multiple summaries.
Required	`(empty)`	The element inside the template item that will receive the heading text.
	`h2 \| h3`	Which heading level to scan. Default: h2.
	`active`	Class added to the currently visible item. Default: active.
	`80`	Scroll offset in pixels — useful if you have a fixed header.

Examples

Basic table of contents

HTML

<div sl-summary-list>
    <div class="summary-item">
        <div sl-summary-text>Item template</div>
    </div>
</div>

<div sl-summary-content>
    <h2>First Section</h2>
    <p>Content...</p>
    <h2>Second Section</h2>
    <p>Content...</p>
</div>

Tips & notes

The template item inside sl-summary-list is cloned for each heading found.
Style the active state using the active class (combo class .summary-item.active in Webflow).
Use matching IDs (sl-summary-list="intro" + sl-summary-content="intro") if you have multiple summaries on the page.