Components
Dev'initions
As much as we F'in LOVE javascript at Finsweet, we know who our market is.
Introducing Visual Script Writer!
There are many people who don't want to write javascript and have zero interest learning. No problem — we made a Visual Script Writer just for you. You don't have to write a single line of code to use this Library. You can generate 100% of the code visually.
For others who are interested in learning javascript - we have deep explanations, step by step walkthroughs, and all that jazz. We built this training around teaching you basics of javascript. If you want to take your Webflow skills to the next level, learn javascript.
If you read the docs, follow the walkthroughs, and really learn how this F'in sweet CMS Library works, you'll also learn the basics of javascript and the building blocks of using most javascript libraries.
Let's learn... and do F'in sweet stuff with Webflow CMS :)
Need help? We have free support!
Add F’in sweet CMS Library to your page
The very first step is to put the library script on the page. The link below is a CDN hosted javascript file free for you to use. You may also download this file and upload the script file to your own server.
We recommend adding this Library before the closing<body></body> tag of the page. CMS Library has no dependencies, so you can put the code in the <head></head> if you need. If you have no reason to put it in the <head></head>, go for the<body></body>
Create a new instance of the Library
Create a new Library instance just below the Library script. Use this function if you are putting your code in the <body></body> (recommended).
<script>
// immediately/self invoked function. This function executes right away
(function() {
// create a new Library instance and store it in a variable called "customBlogPosts"
var customBlogPosts = new FsLibrary('.blog-posts-list') // Collection List class
// we're going to put our components here
})();
</script>
Creating an instance establishes which Webflow dynamic list we are working with when using the components below. Adding components to your instance is flexible. You can add multiple components to the same FsLibrary instance. You can also create multiple instances of FsLibrary on the same page and use different library components on different instances. For example, you can run Add Classes on your customBlogPosts list and also run Filter and Combine on your availableJobs collection list.
Need your script in the <head></head> of the page? Use this function!
<script>
// wait for the DOM to load and then run the function
document.addEventListener("DOMContentLoaded", function() {
// create a new Library instance and store it in a variable called "customBlogPosts"
var customBlogPosts = new FsLibrary('.blog-posts-list') // Collection List class
// we're going to put our components here
});
</script>
Why is it different in the <head></head> ? This waits for the DOM to load before executing the javascript. We must wait for the DOM to load because we are trying to access elements in the DOM with our script.
Code explanation
After we create our instance and store it in a variable, we add components. Choose one and let's get started!