CMS EnhancementWebflow

Finsweet Attributes

Free, code-light CMS filtering, sorting, and pagination via HTML attributes.

Finsweet Attributes is a free, open-source JavaScript library that extends Webflow CMS Collection Lists with filtering, sorting, load-more pagination, dynamic tabs, and native sliders using nothing but HTML attributes. Maintained by Finsweet, the studio behind the Client-First framework, it is the code-light, zero-cost alternative to paid SaaS tools like Jetboost. You paste one script into Project Settings, decorate your elements with fs-list- attributes in the Webflow Designer, publish, and the library powers the rest.

For teams that want precise control over filter behavior and zero monthly fees, Finsweet Attributes is the strongest free option in the Webflow ecosystem.

What Finsweet Attributes does for Webflow CMS

List Filter: Advanced no-code filtering on Collection Lists and static lists using checkboxes, radios, dropdowns, and fuzzy text matching with AND/OR logic across multiple filter groups.
List Sort: Sort any Collection List alphabetically, by date, by number, or by any custom CMS field, ascending or descending.
List Load: Load-more buttons, infinite scroll, traditional numbered pagination, and render-all modes for long CMS lists.
List Tabs: Dynamic, CMS-driven tab navigation so a single Collection List can power tabbed product features or service categories.
List Slider: Native Webflow sliders powered by CMS Collection List items, with no third-party slider library required.
Bonus modules: Accessible accordions, custom form selects, range sliders, auto-generated rich-text tables of contents, combo boxes, modals, copy-to-clipboard, and 30-plus other utilities, all free.

How Attributes extend Webflow without code

Finsweet Attributes replaces custom JavaScript with a single script and a small vocabulary of HTML attributes. You add the universal module script once in Webflow Project Settings, then describe the behavior you want by adding Custom Attributes to elements on the canvas. The library reads those attributes at runtime and wires up the interactions.

The script, placed in Project Settings > Custom Code > Inside <head> tag, is:

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

The fs-list flag on the script tag tells the loader which solution family to initialize. From there, the fs-list-element attribute identifies structural roles (list, filters, clear, results-count), while fs-list-field, fs-list-value, and fs-list-operator describe the matching logic between your filter UI and the fields inside each Collection Item. Because everything is attribute-based, the setup lives inside Webflow and travels with your project, with no external dashboard or account to maintain.

How to add filtering with Finsweet Attributes

In Webflow, open Project Settings > Custom Code and paste the universal script into Inside <head> tag: <script async type="module" src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js" fs-list></script>. Include it once per project.
On the canvas, select your Collection List wrapper (the element that wraps the dynamic items, not the Collection List body) and add Custom Attribute fs-list-element="list".
Wrap your filter UI (checkboxes, radios, dropdowns, text input) in a Webflow Form element, then add fs-list-element="filters" to that Form.
On each filter input, add fs-list-field="[identifier]" (for example fs-list-field="category"), using any identifier you like.
On the matching dynamic text element inside the Collection Item, add the identical fs-list-field="[identifier]" attribute so the library can pair the input with the field.
For checkbox and radio filters, add fs-list-value="[value]" to each option. The value can be static text or bound to a CMS field like {{category}}. Use an empty fs-list-value="" for a "show all" option.
Save and publish your site. Finsweet Attributes does not run in Webflow Design, Edit, or Preview mode, so you must test on the live published URL.
Extend with optional attributes as needed: fs-list-operator for logic (contain, equal, less, greater), fs-list-fuzzy for forgiving text search, fs-list-showquery to sync filters to the URL, and fs-list-element="results-count" to display the filtered item count.

Finsweet Attributes vs. Jetboost

Finsweet Attributes and Jetboost solve the same core problem, enhancing Webflow CMS Collection Lists, but from opposite directions. Finsweet is a free, open-source library you wire up with HTML attributes inside the Webflow Designer. Jetboost is paid SaaS with a visual dashboard, real-time as-you-type search, a favorites system, and a CMS Map for location-based filtering.

Choose Finsweet Attributes when cost is the deciding factor, when you want full control over attribute-level behavior, or when you also need its bonus modules like accordions and range sliders. Choose Jetboost when you need filtering live the same day without touching attributes, when you want polished instant search, or when your project needs favorites that persist with a tool like Memberstack or distance-based map filtering.

Dimension	Finsweet Attributes	Jetboost
Price	Free forever, open-source	$19–$149/month (free only on staging)
Setup	HTML attributes in the Designer	Visual dashboard, then attributes
Search polish	Basic fuzzy matching	Polished real-time as-you-type search
Favorites / Map	Not included	Favorites and CMS Map boosters
Support	Community (Finsweet forum)	Email support, paid priority tiers
Best for	Zero-cost, attribute-level control	Fastest setup, search polish, location filtering

All Attributes modules

Every module below ships in the same free library. The List family (fs-list-) targets Collection Lists; the others are general Webflow utilities.

Module	What it does	Attribute prefix
List Filter	Advanced filtering on Collection and static lists	`fs-list-`
List Sort	Sort CMS or static lists by any field	`fs-list-`
List Load	Load-more, infinite scroll, pagination, render all	`fs-list-`
List Tabs	Dynamic CMS-driven tabs	`fs-list-`
List Slider	Native sliders from Collection Lists	`fs-list-`
List Nest	Nest more than 10 items, unlimited nested collections	`fs-list-`
List Combine	Merge multiple lists into one	`fs-list-`
List Select	Populate a select field from a CMS collection	`fs-list-`
Range Slider	Custom range slider form component	`fs-list-`
Accordion	Accessible accordions without interactions	`fs-accordion-`
Modal	Accessible modal popups	`fs-modal-`
Table of Contents	Auto TOC for a Rich Text block	`fs-toc-`

Best use cases

Filterable blog or resource library

Add category and tag filters plus a fuzzy search input to a Collection List of blog posts, case studies, or documentation, giving readers a faceted archive with no monthly cost.

Load-more and paginated directories

Use List Load to add a load-more button, infinite scroll, or numbered pagination to long directories of team members, vendors, or partners so the page stays fast.

Sortable catalog or portfolio

Let visitors sort a Collection List alphabetically, by date, or by a custom number field such as price or popularity using List Sort on a products, courses, or portfolio collection.

CMS-driven tabs and sliders

Power tabbed feature comparisons or a CMS-backed image gallery using List Tabs and List Slider, so editors update one Collection and the UI rebuilds itself.

Rich-text tables of contents

Generate a clickable table of contents automatically on long-form CMS posts using the Table of Contents module, improving navigation and time-on-page.

Limitations to know

No polished real-time search: filtering is the strength; full-text search is basic compared with Jetboost's as-you-type Booster.
Client-side only: all filtering happens in the browser, so very large collections (hundreds of items and up) can feel slow, and initial page weight grows with the list.
No favorites, bookmarking, or CMS Map: those features live in Jetboost (often paired with Memberstack), not in Attributes.
Requires comfort with custom attributes and live testing: Attributes do not execute in the Webflow Designer preview, so you must publish to verify behavior, and support is community-driven via the Finsweet forum.

Jetboost — the paid, dashboard-driven alternative with real-time search, favorites, and CMS Map.
Blog: 20 Best Webflow Integrations to Use in 2026
Guide: How to filter CMS items in Webflow
Guide: How to sort CMS items in Webflow

Frequently asked questions

Yes. Finsweet Attributes is completely free and open-source forever, with no usage limits, no visitor caps, and no paid tiers. You paste one script from the jsDelivr CDN into your Webflow Project Settings and every module (filtering, sorting, pagination, tabs, sliders, accordions, and 30-plus other tools) is included. Optional paid Finsweet services like Client-First consulting exist, but the Attributes library itself costs $0.

Add the universal Attributes script to your Project Settings head tag, then mark your Collection List wrapper with fs-list-element="list" and wrap your filter inputs in a Form element tagged fs-list-element="filters". On each input add fs-list-field with an identifier, and add the identical fs-list-field to the matching text element inside each Collection Item. For checkboxes and radios, add fs-list-value with the option value. Publish the site and test on the live URL, since Attributes do not run in the Designer preview.

Finsweet Attributes is free and open-source while Jetboost is paid SaaS starting at $19 per month. Finsweet uses HTML attributes you add in the Webflow Designer, whereas Jetboost gives you a visual dashboard and polished as-you-type search, favorites, and a CMS Map booster. Choose Finsweet when you want zero cost and precise attribute-level control, and Jetboost when you want the fastest setup, real-time search polish, or location-based filtering on a production site.

Yes. Finsweet Attributes is built specifically to extend Webflow CMS Collection Lists with no code. The List Filter, List Sort, List Load, List Tabs, and List Slider modules all target Collection Lists and the dynamic fields inside Collection Items. It also works on static lists, so you can filter non-CMS content too. Filtering runs client-side in the browser after the page loads, so it performs best on collections of a few hundred items rather than thousands.

Install Finsweet Attributes and use the List Load module. Add the universal script to your Project Settings head, tag your Collection List wrapper with fs-list-element="list", then add the load controls (a load-more button, pagination buttons, or a scroll trigger for infinite scroll) with the appropriate fs-list-element values such as load-more and page-count. Publish the site and test on the live URL. List Load supports load-more buttons, infinite scroll, traditional numbered pagination, and render-all modes, all for free.

More Webflow integrations