open-index/open-npm huggingface dataset:
npm package: @finsweet/3dglobes
Description: 3D interactive globe on a Webflow site without coding.
Author: Finsweet
Latest version: 1.0.0

# 3D interactive globe on a Webflow site without coding

Visit: https://www.3dglobes-wf.com/

- Cloneable project
- Webflow CMS integrated
- Zero edit copy-paste code
- Globe design as a .jpg image
- Fully translatable with Weglot
npm package: @finsweet/attributes-a11y
Description: Accessibility JS solutions for Webflow.
Author: Finsweet
Latest version: 1.1.3

# `a11y` Attribute

Accessibility JS solutions for Webflow.

## CDN Import

```html
<!-- [Attributes by Finsweet] A11Y -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-a11y@1/a11y.js"></script>
```
npm package: @finsweet/attributes-accordion
Description: Create accessible accordions inside Webflow without Webflow Interactions.
Author: Finsweet
Latest version: 1.1.2

# `accordion` Attribute

Create accessible accordions inside Webflow without Webflow Interactions.

## CDN Import

```html
<!-- [Attributes by Finsweet] Accordion -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-accordion@1/accordion.js"></script>
```
npm package: @finsweet/attributes-autovideo
Description: Auto-play videos only in viewport.
Author: Finsweet
Latest version: 1.5.0

# `autovideo` Attribute

Auto-play videos only in viewport.

The script detects all videos on the page (`Background Video` components & `<video>` elements used in `HTML Embeds`) and plays/pauses them based on if they are visible in the viewport.

## CDN Import

```html
<!-- [Attributes by Finsweet] CMS Display Values -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-autovideo@1/autovideo.js"></script>
```
npm package: @finsweet/attributes-cmsattribute
Description: Apply custom attributes with CMS fields. Use with CMS Collection List and Template page.
Author: Finsweet
Latest version: 1.3.0

# `cmsattribute` Attribute

Apply custom attributes with CMS fields. Use with CMS Collection List and Template page.

## CDN Import

```html
<!-- [Attributes by Finsweet] CMS Attribute -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsattribute@1/cmsattribute.js"></script>
```
npm package: @finsweet/attributes-cmscombine
Description: Combine multiple Collection Lists to one Collection List.
Author: Finsweet
Latest version: 1.8.0

# `cmscombine` Attribute

Take different Collection Lists from different Collections and Combine them to one single Collection List

## CDN Import

```html
<!-- [Attributes by Finsweet] CMS Combine -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmscombine@1/cmscombine.js"></script>
```
npm package: @finsweet/attributes-cmscss
Description: Add CSS classes to Collection Item elements based on a media query.
Author: Finsweet
Latest version: 1.5.0

# `cmscss` Attribute

Add CSS classes to Collection Item elements based on a media query.

## CDN Import

```html
<!-- [Attributes by Finsweet] CMS CSS -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmscss@1/cmscss.js"></script>
```
npm package: @finsweet/attributes-cmsload
Description: Load More Webflow CMS items on the page after the page has loaded.
Author: Finsweet
Latest version: 1.12.1

# `cmsload` Attribute

Set up load more functionality in Webflow CMS. User click, infinite, pagination, and render-all options available.

## CDN Import

```html
<!-- [Attributes by Finsweet] CMS Load -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsload@1/cmsload.js"></script>
```

## JavaScript API

You can access the `cmsload` instances by pushing a callback into the `window.fsAttributes` object:

```typescript
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
  'cmsload',
  (listInstances) => {
    console.log('cmsload Successfully loaded!');

    // The callback passes a `listInstances` array with all the `CMSList` instances on the page.
    const [listInstance] = listInstances;

    // The `renderitems` event runs whenever the list renders items after switching pages.
    listInstance.on('renderitems', (renderedItems) => {
      console.log(renderedItems);
    });
  },
]);
```

The callback passes an array with all the `CMSList` instances on the page.
To see more about the `CMSList` instance, check the [`cmscore` docs](https://www.npmjs.com/package/@finsweet/attributes-cmscore).
npm package: @finsweet/attributes-cmsnest
Description: Nest CMS collections easily on Webflow.
Author: Finsweet
Latest version: 1.12.1

# `cmsnest` Attribute

Break CMS Nested Collection limitations. Nest more than 5 items. Nest multiple Collections on a page.

## CDN Import

```html
<!-- [Attributes by Finsweet] CMS Nest -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsnest@1/cmsnest.js"></script>
```
npm package: @finsweet/attributes-cmsprevnext
Description: Add Previous and Next buttons in Collection Template Pages.
Author: Finsweet
Latest version: 1.6.0

# `cmsprevnext` Attribute

Add Previous and Next buttons in Collection Template Pages.

## CDN Import

```html
<!-- [Attributes by Finsweet] CMS PrevNext -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsprevnext@1/cmsprevnext.js"></script>
```
npm package: @finsweet/attributes-cmsselect
Description: Populate Select elements based on a CMS source.
Author: Finsweet
Latest version: 1.7.0

# `cmsselect` Attribute

Populate Select elements based on a CMS source.

## CDN Import

```html
<!-- [Attributes by Finsweet] CMS Select -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsselect@1/cmsselect.js"></script>
```
npm package: @finsweet/attributes-cmsslider
Description: Convert the native Webflow slider component to a CMS slider.
Author: Finsweet
Latest version: 1.7.1

# `cmsslider` Attribute

Make Webflow native slider component CMS powered with a Webflow Collection List.

## CDN Import

```html
<!-- [Attributes by Finsweet] CMS Slider -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsslider@1/cmsslider.js"></script>
```
npm package: @finsweet/attributes-cmssort
Description: Create advanced and complex no-code sorting for Webflow CMS Collection List content.
Author: Finsweet
Latest version: 1.13.3

# `cmssort` Attribute

Create advanced and complex no-code sorting for Webflow CMS Collection List content.

## CDN Import

```html
<!-- [Attributes by Finsweet] CMS Sort -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmssort@1/cmssort.js"></script>
```

## JavaScript API

You can access the `cmssort` instances by pushing a callback into the `window.fsAttributes` object:

```typescript
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
  'cmssort',
  (listInstances) => {
    console.log('cmssort Successfully loaded!');

    // The callback passes a `listInstances` array with all the `CMSList` instances on the page.
    const [listInstance] = listInstances;

    // The `renderitems` event runs whenever the list renders items after sorting.
    listInstances.listInstance.on('renderitems', (renderedItems) => {
      console.log(renderedItems);
    });
  },
]);
```

The callback passes an array with all the `CMSList` instances on the page.
To see more about the `CMSList` instance, check the [`cmscore` docs](https://www.npmjs.com/package/@finsweet/attributes-cmscore).
npm package: @finsweet/attributes-cmsstatic
Description: Inject static content anywhere in a Webflow CMS Collection List.
Author: Finsweet
Latest version: 1.3.0

# `cmsstatic` Attribute

Inject static content anywhere in a Webflow CMS Collection List.

## CDN Import

```html
<!-- [Attributes by Finsweet] CMS Static -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsstatic@1/cmsstatic.js"></script>
```
npm package: @finsweet/attributes-cmstabs
Description: Convert the native Webflow tabs component to CMS tabs
Author: Finsweet
Latest version: 1.7.0

# `cmstabs` Attribute

Make Webflow native tabs component CMS powered with a Webflow Collection List.

## CDN Import

```html
<!-- [Attributes by Finsweet] CMS Tabs -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmstabs@1/cmstabs.js"></script>
```
npm package: @finsweet/attributes-codehighlight
Description: Syntax highlighting for your Webflow sites.
Author: Finsweet
Latest version: 1.5.2

# `codehighlight` Attribute

Syntax highlighting for your Webflow sites.

## CDN Import

```html
<!-- [Attributes by Finsweet] Code Highlight -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-codehighlight@1/codehighlight.js"></script>
```

```html
<!-- [Attributes by Finsweet] Code Highlight Webflow Theme -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-codehighlight@1/themes/webflow.css"></script>
```
npm package: @finsweet/attributes-combobox
Description: A combo box that helps users select an item from a large list of options.
Author: Finsweet
Latest version: 1.0.7

# `combobox` Attribute

A combo box that helps users select an item from a large list of options.

## CDN Import

```html
<!-- [Attributes by Finsweet] Combo box  -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-combobox@1/combobox.js"></script>
```
npm package: @finsweet/attributes-component
Description: Import components from any internal or external Webflow project.
Author: Finsweet
Latest version: 1.2.1

# `component` Attribute

Import components from any internal or external Webflow project.

## CDN Import

```html
<!-- [Attributes by Finsweet] Component -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-component@1/component.js"></script>
```
npm package: @finsweet/attributes-copyclip
Description: Set any element to copy a string value to the clipboard when clicking on it.
Author: Finsweet
Latest version: 1.7.0

# `copyclip` Attribute

Users can set any element to copy a string value to the clipboard when clicking on it. The script can be set by adding attributes to individual elements or by setting global attributes to the `<script>` tag that will affect all elements.

## CDN Import

```html
<!-- [Attributes by Finsweet] CMS Copy to Clipboard -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-copyclip@1/copyclip.js"></script>
```
npm package: @finsweet/attributes-countitems
Description: Display the amount of CMS items of a Collection List.
Author: Finsweet
Latest version: 1.6.0

# `countitems` Attribute

Display the amount of CMS items of a Collection List.

## CDN Import

```html
<!-- [Attributes by Finsweet] CMS Display Values -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-countitems@1/countitems.js"></script>
```
npm package: @finsweet/attributes-displayvalues
Description: Display the value of a Form Element.
Author: Finsweet
Latest version: 1.4.0

# `displayvalues` Attribute

Display the value of a Form Element.

## CDN Import

```html
<!-- [Attributes by Finsweet] CMS Display Values -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-displayvalues@1/displayvalues.js"></script>
```
npm package: @finsweet/attributes-favcustom
Description: Customize the Favicon for a specific page.
Author: Finsweet
Latest version: 1.5.0

# `favcustom` Attribute

Customize Favicon for a specific page.

## CDN Import

```html
<!-- [Attributes by Finsweet] CMS Custom Favicon -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-favcustom@1/favcustom.js"></script>
```
npm package: @finsweet/attributes-formsubmit
Description: Smart actions after Webflow form submission.
Author: Finsweet
Latest version: 1.4.1

# `formsubmit` Attribute

Smart actions after Webflow form submission.

## CDN Import

```html
<!-- [Attributes by Finsweet] Smart Form Submit -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-formsubmit@1/formsubmit.js"></script>
```
npm package: @finsweet/attributes-greenhouse
Description: Attributes integration for Greenhouse
Author: Finsweet
Latest version: 0.4.0

# `greenhouse` Attribute

Attributes integration for Greenhouse.

## CDN Import

```html
<!-- [Attributes by Finsweet] ATTRIBUTE_TITLE -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-greenhouse@0/greenhouse.js"></script>
```
npm package: @finsweet/attributes-inputactive
Description: Set custom active CSS classes for Webflow form elements.
Author: Finsweet
Latest version: 1.0.0

# `inputactive` Attribute

Set custom active CSS classes for Webflow form elements.

## CDN Import

```html
<!-- [Attributes by Finsweet] Input Active Class -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-inputactive@1/inputactive.js"></script>
```
npm package: @finsweet/attributes-inputcounter
Description: Increment and decrement (+ and -) counter in a Webflow Form.
Author: Finsweet
Latest version: 1.2.5

# `inputcounter` Attribute

Increment and decrement (+ and -) counter in a Webflow Form.

## CDN Import

```html
<!-- [Attributes by Finsweet] Input Counter -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-inputcounter@1/inputcounter.js"></script>
```
npm package: @finsweet/attributes-launchdarkly
Description: LaunchDarkly integration for Webflow sites.
Author: Finsweet
Latest version: 0.2.0

# `launchdarkly` Attribute

LaunchDarkly integration for Webflow sites.

## CDN Import

```html
<!-- [Attributes by Finsweet] LaunchDarkly -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-launchdarkly@1/launchdarkly.js"></script>
```
npm package: @finsweet/attributes-linkblockedit
Description: Editor friendly link blocks.
Author: Finsweet
Latest version: 1.5.0

# `linkblockedit` Attribute

Allow clients to edit Webflow Link Block elements inside Editor.

## CDN Import

```html
<!-- [Attributes by Finsweet] CMS Edit Link Blocks in Editor -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-linkblockedit@1/linkblockedit.js"></script>
```
npm package: @finsweet/attributes-mirrorclick
Description: Mirrors click events between two elements.
Author: Finsweet
Latest version: 1.5.0

# `mirrorclick` Attribute

Mirror a click from one element to another.

## CDN Import

```html
<!-- [Attributes by Finsweet] CMS Mirror Click Events -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-mirrorclick@1/mirrorclick.js"></script>
```
npm package: @finsweet/attributes-mirrorinput
Description: Mirrors input events between two elements.
Author: Finsweet
Latest version: 1.4.0

# `mirrorinput` Attribute

Mirror a user input to another input.

## CDN Import

```html
<!-- [Attributes by Finsweet] CMS Mirror Input Values -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-mirrorinput@1/mirrorinput.js"></script>
```
npm package: @finsweet/attributes-modal
Description: Create accessible modal popups easily on Webflow.
Author: Finsweet
Latest version: 1.1.3

# `modal` Attribute

Create accessible modal popups easily on Webflow.

## CDN Import

```html
<!-- [Attributes by Finsweet] Modal -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-modal@1/modal.js"></script>
```
npm package: @finsweet/attributes-numbercount
Description: Create a number count animation in Webflow.
Author: Finsweet
Latest version: 1.2.1

# `numbercount` Attribute

Create a number count animation in Webflow.

## CDN Import

```html
<!-- [Attributes by Finsweet] Number Count -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-numbercount@1/numbercount.js"></script>
```
npm package: @finsweet/attributes-queryparam
Description: Use query parameter values to populate form inputs and text elements.
Author: Finsweet
Latest version: 1.2.1

# `queryparam` Attribute

Use query parameter values to populate form inputs and text elements.

## CDN Import

```html
<!-- [Attributes by Finsweet] Query Param -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-queryparam@1/queryparam.js"></script>
```
npm package: @finsweet/attributes-rangeslider
Description: Build a custom Range Slider Form component natively in Webflow.
Author: Finsweet
Latest version: 1.8.0

# `rangeslider` Attribute

Build a custom Range Slider Form component natively in Webflow.

## CDN Import

```html
<!-- [Attributes by Finsweet] CMS Range Slider -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-rangeslider@1/rangeslider.js"></script>
```
npm package: @finsweet/attributes-readtime
Description: Calculate and display the estimated read time of Rich Text content based on word count.
Author: Finsweet
Latest version: 1.2.3

# `readtime` Attribute

Display the read time of an article.

## CDN Import

```html
<!-- [Attributes by Finsweet] ATTRIBUTE_TITLE -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-readtime@1/readtime.js"></script>
```
npm package: @finsweet/attributes-richtext
Description: Add HTML to Rich Text elements, add components from the same page or from different pages, add classes, ids, attributes, and more.
Author: Finsweet
Latest version: 1.10.3

# `richtext` Attribute

Add HTML to Rich Text elements, add components from the same page or from different pages, add classes, ids, attributes, and more.

## CDN Import

```html
<!-- [Attributes by Finsweet] CMS Powerful Rich Texr -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-richtext@1/richtext.js"></script>
```
npm package: @finsweet/attributes-scrolldisable
Description: Disables scrolling on certain events.
Author: Finsweet
Latest version: 1.6.2

# `scrolldisable` Attribute

Users can prevent the page from scrolling when:

- An element is clicked.
- An element is visible on the page.
- A Nav Menu is open.

## CDN Import

```html
<!-- [Attributes by Finsweet] CMS Scroll Disable -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-scrolldisable@1/scrolldisable.js"></script>
```
npm package: @finsweet/attributes-selectcustom
Description: Create custom Select Dropdown components inside Webflow.
Author: Finsweet
Latest version: 1.7.2

# `selectcustom` Attribute

Create custom Select Dropdown components inside Webflow.

## CDN Import

```html
<!-- [Attributes by Finsweet] Custom Select Dropdowns -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-selectcustom@1/selectcustom.js"></script>
```
npm package: @finsweet/attributes-sliderdots
Description: Create custom Slider Dots for a Slider.
Author: Finsweet
Latest version: 1.8.0

# `sliderdots` Attribute

Populate the Webflow slider dots with content. Add images, text, or any type of element inside native Webflow slider navigation.

## CDN Import

```html
<!-- [Attributes by Finsweet] CMS Slider Dots -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-sliderdots@1/sliderdots.js"></script>
```
npm package: @finsweet/attributes-smartlightbox
Description: Change the position of an opened lightbox to prevent unwanted `z-index`, `fixed` positioning, and `transform` issues.
Author: Finsweet
Latest version: 1.7.0

# `smartlightbox` Attribute

Change the position of an opened lightbox to prevent unwanted `z-index`, `fixed` positioning, and `transform` issues.

## CDN Import

```html
<!-- [Attributes by Finsweet] Smart Lightbox -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-smartlightbox@1/smartlightbox.js"></script>
```
npm package: @finsweet/attributes-socialshare
Description: Share content to social media platforms. Works with Collection Lists, Templates, and static content.
Author: Finsweet
Latest version: 1.3.2

# `socialshare` Attribute

Share content to social media platforms. Works with Collection Lists, Templates, and static content.

## CDN Import

```html
<!-- [Attributes by Finsweet] Social Share -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-socialshare@1/socialshare.js"></script>
```
npm package: @finsweet/attributes-starrating
Description: Star rating radio button component inside any Webflow form.
Author: Finsweet
Latest version: 1.0.2

# `starrating` Attribute

Star rating radio button component inside any Webflow form.

## CDN Import

```html
<!-- [Attributes by Finsweet] Star Rating -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-starrating@1/starrating.js"></script>
```
npm package: @finsweet/attributes-support
Latest version: 1.1.1

# Attribute Automated Support


## Installation

### Option 1: Run in a page with attributes already loaded

Enter the query string into url, example:

```text
https://my-website.webflow.io?fs-attributes-support=true
```

### Option 2: Add to your web page the following HTML tags

```html
<script async 'https://cdn.jsdelivr.net/npm/@finsweet/attributes-support@1/support.js'></script>
```

### Options 3: Run the loading script on your console

- Open Dev Tools - F12
- Click Console
- Copy and paste the following code

```js
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';

script.src = 'https://cdn.jsdelivr.net/npm/@finsweet/attributes-support@1/support.js';
head.appendChild(script);


```

- Click enter to execute.

### Oficial documentation CMS Load

```link
https://www.finsweet.com/attributes/cms-load/
```

## Contribution

### Instalation

- First install dependencies

```bash
yarn
```

- Run quality chain to check if everything is ok for start.

```bash
yarn tsc && yarn lint &&  yarn run check && yarn build && yarn test
```
npm package: @finsweet/attributes-toc
Description: Automatically generate a table of contents based on heading tags. Works with Webflow Rich Text, Webflow "Current" class, and anchor scroll. CMS, static, and all text elements are supported.
Author: Finsweet
Latest version: 1.2.4

# `toc` Attribute

Automatically generate a table of contents based on heading tags. Works with Webflow Rich Text, Webflow "Current" class, and anchor scroll. CMS, static, and all text elements are supported.

## CDN Import

```html
<!-- [Attributes by Finsweet] ATTRIBUTE_TITLE -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-toc@1/toc.js"></script>
```
npm package: @finsweet/attributes-videohls
Description: Implement hls.js to a Webflow project.
Author: Finsweet
Latest version: 1.0.3

# `videohls` Attribute

Implement [hls.js](https://github.com/video-dev/hls.js/) to a Webflow project.

## CDN Import

```html
<!-- [Attributes by Finsweet] Video HLS -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-videohls@1/videohls.js"></script>
```
npm package: @finsweet/cms-library
Description: A javascript Library that makes your Webflow CMS. Lists a hell of a lot more powerful.
Author: Finsweet
Latest version: 1.9.11

# Finsweet CMS Library

A javascript Library that makes your Webflow CMS. Lists a hell of a lot more powerful.

# Importing the library

```html
<script src="https://cdn.jsdelivr.net/npm/@finsweet/cms-library@1/cms-library.js">
```

## Documentation

See https://finsweet.com/cms-library for usage and examples.