Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/finsweet/attributes/llms.txt

Use this file to discover all available pages before exploring further.

Attributes by Finsweet

​
What is Attributes?

Attributes is an open source JavaScript library of solutions for adding filters, sort, load & search options, CMS tabs & sliders—and more—to Webflow using simple HTML attributes. Instead of writing complex JavaScript, you simply add HTML attributes to your Webflow elements. Attributes handles all the heavy lifting, from DOM manipulation to event handling, giving you powerful functionality with minimal effort.

​
Why use Attributes?

No code required

Add powerful features to your Webflow site using simple HTML attributes. No JavaScript knowledge needed.

Production ready

Used by thousands of Webflow sites worldwide. Battle-tested, maintained, and actively developed.

Open source

Fully open source under Apache 2.0. Inspect the code, contribute features, or report issues on GitHub.

Modular design

Load only the attributes you need. Each solution is independent and optimized for performance.

​
Available solutions

Attributes provides 28 individual solutions that you can mix and match:
  • CMS List - Filter, sort, search, and load more items in CMS lists
  • Modal - Create accessible modal dialogs with custom animations
  • Copy Clip - Copy text to clipboard with one click
  • Accordion - Build accessible accordion components
  • Table of Contents - Auto-generate navigation from headings
  • Form Submit - Enhanced form submission handling
  • Smart Lightbox - Advanced lightbox functionality
  • Social Share - Share content to social media
  • And 20 more…
Each attribute is a separate module that can be loaded individually or as part of the complete library.

​
Get started

Installation

Learn how to add Attributes to your Webflow project using CDN or npm.

Quickstart

Build your first feature in 5 minutes with a step-by-step tutorial.

​
How it works

Attributes uses a simple attribute-based API. Here’s a quick example using the Modal attribute: 
<!-- Modal trigger button -->
<button fs-modal-open="my-modal">Open Modal</button>

<!-- Modal element -->
<div fs-modal="my-modal" style="display: none;">
  <h2>Welcome!</h2>
  <p>This is a modal dialog.</p>
  <button fs-modal-close>Close</button>
</div>
That’s it! Attributes automatically handles:
  • Opening and closing the modal
  • Focus management and accessibility
  • Keyboard navigation (ESC to close)
  • Background scroll locking
  • Animation states

​
Support and community

Need help or have questions?
The issue list on GitHub is exclusively for bugs and feature requests. For questions and support, please use the Finsweet forum.