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.

The Finsweet Attributes library exposes a global window.FinsweetAttributes object that provides programmatic access to all Attribute solutions.

​
Overview

The API allows you to:
  • Load Attributes dynamically
  • Run callbacks when Attributes finish loading
  • Access utility functions
  • Destroy and restart Attribute instances

​
Global Object

​
window.FinsweetAttributes

The main API object with the following structure: 
interface FinsweetAttributes {
  version: string;
  scripts: HTMLScriptElement[];
  modules: { [key: string]: FinsweetAttributeControls };
  process: Set<string>;
  utils: {
    fetchPage: (url: string) => Promise<Document>;
    attachExternalStylesheets: (doc: Document) => void;
  };
  load: (attribute: string) => Promise<any> | undefined;
  push: (...args: [string, (value: any) => void][]) => void;
  destroy?: () => void;
}

​
Properties

​
version
string
The current version of the Finsweet Attributes library.
console.log(window.FinsweetAttributes.version); // "2.0.0"
​
scripts
HTMLScriptElement[]
An array of script tags that loaded the Attributes library. Multiple scripts may exist if the library is imported multiple times.
console.log(window.FinsweetAttributes.scripts.length);
​
modules
object
An object containing controls for each loaded Attribute solution. Keys are Attribute names (e.g., 'list', 'scrolldisable').
// Access the CMS Load attribute controls
const list = window.FinsweetAttributes.modules.list;
Each module has the following structure:
​
process
Set<string>
A Set containing the keys of Attributes that are currently running or have been initialized.
if (window.FinsweetAttributes.process.has('list')) {
  console.log('CMS Load is running');
}
​
utils
object
Utility functions provided by the library.

​
Methods

​
load()

Dynamically loads an Attribute solution at runtime.
​
attribute
string
required
The Attribute key to load (e.g., 'list', 'scrolldisable', 'accordion').
// Load CMS Load dynamically
await window.FinsweetAttributes.load('list');
console.log('CMS Load has been loaded and initialized');
If an Attribute is already loading or has been loaded, calling load() again will not reload it. Each Attribute is only initialized once.

​
push()

Registers one or more callbacks to run after specific Attributes have loaded. This is useful for executing code that depends on an Attribute being ready.
​
...args
[string, (value: any) => void][]
required
One or more tuples containing:
  1. The Attribute key (string)
  2. A callback function to execute when the Attribute is ready
// Single callback
window.FinsweetAttributes.push([
  'list',
  (result) => {
    console.log('CMS Load is ready!', result);
  }
]);

// Multiple callbacks
window.FinsweetAttributes.push(
  ['list', (result) => console.log('CMS Load ready', result)],
  ['scrolldisable', (result) => console.log('Scroll Disable ready', result)]
);
If you call push() before the Attributes library is loaded, you need to initialize the array first:
window.FinsweetAttributes ||= [];
window.FinsweetAttributes.push(['list', callback]);

​
destroy()

Destroys all running Attribute instances and removes all event listeners and side effects. 
// Clean up all Attributes
window.FinsweetAttributes.destroy();
This calls the destroy() method on each individual Attribute module. Attributes that don’t implement a destroy function will be skipped.

​
Usage Examples

​
Running Code After an Attribute Loads

If you need to execute code after an Attribute has initialized: 
window.FinsweetAttributes ||= [];
window.FinsweetAttributes.push([
  'list',
  (result) => {
    // CMS Load is ready
    console.log('CMS content has been loaded');
    
    // Access the result value if the Attribute returns one
    console.log(result);
  }
]);

​
Loading an Attribute Dynamically

You can load Attributes on-demand instead of including them in the script tag: 
// Load the Accordion attribute when needed
const loadAccordion = async () => {
  await window.FinsweetAttributes.load('accordion');
  console.log('Accordion is now active');
};

// Call when user interacts with something
document.querySelector('#show-faq').addEventListener('click', loadAccordion);

​
Restarting an Attribute

If you need to reinitialize an Attribute (e.g., after adding new content to the DOM): 
// Restart CMS Load to pick up new elements
await window.FinsweetAttributes.modules.list?.restart();

​
Destroying and Cleaning Up

When you need to remove all Attributes (e.g., in a single-page application): 
// Clean up when navigating away
const cleanup = () => {
  window.FinsweetAttributes.destroy();
  console.log('All Attributes have been destroyed');
};

// Use in your framework's unmount/destroy lifecycle
component.onDestroy(cleanup);

​
Checking if an Attribute is Running

if (window.FinsweetAttributes?.process.has('list')) {
  console.log('CMS Load is currently running');
} else {
  console.log('CMS Load is not active');
}

​
Accessing Attribute Versions

// Library version
console.log('Library:', window.FinsweetAttributes.version);

// Individual Attribute versions
console.log('CMS Load:', window.FinsweetAttributes.modules.list?.version);
console.log('Accordion:', window.FinsweetAttributes.modules.accordion?.version);

​
TypeScript Support

If you’re using TypeScript, the library exports full type definitions: 
import type {
  FinsweetAttributes,
  FinsweetAttributeControls,
  FinsweetAttributeKey,
  FinsweetAttributesCallback,
} from '@finsweet/attributes-utils';

// Typed access
const attributes: FinsweetAttributes = window.FinsweetAttributes;

// Typed callback
const callback: FinsweetAttributesCallback = [
  'list',
  (result: any) => {
    console.log(result);
  }
];

window.FinsweetAttributes.push(callback);

​
Integration with Frameworks

​
React

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // Load Attributes when component mounts
    window.FinsweetAttributes?.load('list');

    // Cleanup when component unmounts
    return () => {
      window.FinsweetAttributes?.modules.list?.destroy();
    };
  }, []);

  return <div>Your app</div>;
}

​
Vue

<script setup>
import { onMounted, onUnmounted } from 'vue';

onMounted(async () => {
  await window.FinsweetAttributes?.load('list');
  console.log('CMS Load ready');
});

onUnmounted(() => {
  window.FinsweetAttributes?.modules.list?.destroy();
});
</script>

​
Svelte

<script>
  import { onMount, onDestroy } from 'svelte';

  onMount(async () => {
    await window.FinsweetAttributes?.load('list');
  });

  onDestroy(() => {
    window.FinsweetAttributes?.modules.list?.destroy();
  });
</script>

Creating Custom Attributes

Learn how to build your own Attribute solutions

Troubleshooting

Common issues and solutions

Build docs developers (and LLMs) love

Get started for freeTalk to us