MENU

Big announcement: Attributes replaces CMS Library

The topic of this video is our new Attributes system. Attributes will be the home of all future free community tools from Finsweet.

Attributes is a series of solutions in Webflow that would normally require code to accomplish. Instead of using code, we use Attributes.

Our most popular existing solutions will be migrated to Attributes. Anything we do from today forward will be developed and released as Attributes.

The goals of this post are to:

  • Understand why Finsweet is growing out of CMS Library and transitioning to Attributes
  • Understand how you benefit from this as a Webflow user
  • Learn how Attributes works with a live example
  • Get you excited to use Attributes

CMS Library has been our most popular community solution. Today CMS Library helps thousands of developers and serves millions of pages monthly. And we are no longer supporting CMS Library. Because we've created a 2.0 solution.

We have completely rebuilt our entire system. Every line of code is fresh, every feature revisited for improvement. This update is so intense that we can not call it CMS Library 2.0.

We have heard your feedback. And you've motivated us to deliver you a superior solution.

That solution is called Attributes.

Let's get into specifics about why Attributes is so much better than CMS Library.

CMS Library is great. It has helped so many Webflow users build and deliver better Webflow projects. CMS Library may be the ideal solution for your project.

However, we do understand it's far from perfect. You may have a project or use case that can't be solved with CMS Library. We don't like that.

So let's look at the problems we have with CMS Library.

These are the reasons CMS Library may not work for one of your projects.

  • Bad UX when using Load More and Filter when CMS List is long
  • Filtering can be slow when there are many items on the page
  • Ecommerce cart button conflicting with CMS Library
  • Issues with custom generated Sliders and Tabs
  • Not modular or flexible for unique use cases
  • + more

Attributes has fixed 100% of these problems. Yes, every problem I just said is now working by default in Attributes. Our rebuild of the system took these problems into consideration.

We don't want our tools to work for some projects and not work at all for others. We want Finsweet tools to be valuable and usable across all Webflow projects.

Now let's go through the list of optimizations we've made in Attributes

  • 100% modular. Only load the functionality that you need. Each solution is seamlessly inter-compatible.
  • Fully asynchronous, non-blocking runtime. Users are able to start interacting with your website immediately while Attributes runs its tasks in the background. This fixes so many of your problems with CMS Library.
  • Accessibility focused. Everything is accessible by default.
  • And coming soon, we have Debug mode for automated support and an Extendable JavaScript API for developers. This allows Attributes to work as the base for any custom code-based solution that you require in Webflow.

We're getting more serious about the quality of product that we deliver to you. We're dedicated to giving you the best technical solutions.

Our biggest upgrade is our improvement in CMS data filtering. Attributes CMS Filter manages your filtered data like no other solution used in Webflow.

Most filter solutions render all items on the page and then set display: none to items that are not visible in the list. CMS Library does this.

Watch this example. All items are on the page. As I filter, all of the items remain there, and their display changes. They're set to display: none. And then display: none is removed.

Attributes features a more powerful solution that only renders items on the page if the item is needed. Render is a fancy term for displaying on the page. Watch as this filter changes. We're only going to render the items that need to be seen. As the filter updates, items are being added and removed from the DOM. No display: none.

Attributes manages the state of your Collection List and adds reactivity to Collection Items. It surgically renders or removes Collection Items only when required. It works similar to many JavaScript frameworks, like React. This prevents unneeded layout computations. It respects CSS properties like “nth-child()” while filtering.

All of this is part of our mission to be the most performant filter solution for your Webflow project.

And.... all of this is no-code. We just got a little technical with that explanation. But I assure you, Attributes is for all users of all experiences levels. You will not have to write, edit, or copy-paste any inline javascript code to your website.

Let’s look at the steps you take to implement any Attributes solution.

  1. Copy the script file for the solution you want to use. Paste it in the head of the site.
  2. Apply attributes to elements on the page to identify them.

Some solutions require one, or a few, attributes. Some solutions require many attributes. We have documentation to help you through the process.

Attributes is a system. We have built it as a system so all of our solutions can feel unified. So all of our solutions can be approached with the same mindset. As you continue to implement Attributes into your projects, the system will feel more familiar. Every Attribute has the same process.

There are two types of Attributes:

  • Elements
  • Options

Look at this structure:

Let's see an example.

We apply element attributes when we want to define an element on the page. For example, adding a "reset" attribute to the button that acts as the reset filter button. It defines what an element on the page is. It's the reset button.

We apply option attributes to define options within a functionality. For example, adding a "showquery" attribute to CMS Filter. It customizes an option for the Filter functionality. You can optionally show url query parameters based on filtered results. This is an option.

These are the only two types of Attributes in our system. You're either tagging an element or giving an element an option. Copy to clipboard, custom slider dots, CMS filter, mirror input, everything follows it.

Not only have we migrated our CMS Library solutions to Attributes. We have rebuilt our Sweet Text solution, migrated some Finsweet Hacks, and created a series of new useful functionalities for Webflow. All in Attributes.

Instead of adding tags for classes as we do in Sweet Text. We're going to write html directly in the Rich Text Block. We can add classes, ids, attributes, anything we want. Html directly inline with the text gives you full control over your Rich Text Block.

And this is not the best part. We're introducing components to the Rich Text Block. Add entire components inline to Rich Text content. Components can be added from any page of your project.

The options are endless. Custom call to action blocks, advertisement bars, tables, calculators, anything you want. As long as it's in your Webflow project, it can be added anywhere inside the Rich Text Block.

At the time of this launch, we have 20 solutions - and this is the beginning.

Our list of Attributes will continue to grow. We built this new system to be scalable and modular.

Previously, Finsweet has released different sub brands, different landing pages, and different names for each new solution. CMS Library, Sweet Text, Cal Invite, Hacks, Class Adder, and more.

Although this was an excellent strategy for us at the time this is not a solution that fits with our company today. The deceision to create sub brands and unique landing pages was made over 3 years ago. Finsweet has evolved since then and our tools must evolve as well.

All free Finsweet community tools will be consolidated to Attributes. This is our official platform for all new solutions. Existing solutions will still be accessible and available for use.

If you have existing solutions implemented in web projects, you have nothing to worry about. Everything will still work in your existing projects. However, the solutions wil not be supported or updated. Finsweet is all-in on Attributes.

Roadmap for Attributes and how we plan to grow it.

Phase 1 - Beta

Release X10X solutions in Attributes. Get feedback for documentation and implementation method.

Phase 2 - Delivered today

CMS Library rebuild. CMS Filter, Sort, Load More, Slider, Tabs, Combine, Nest, and newly added CMS Select.

Phase 3 - In the near future

Accessibility series. Attributes solutions specficially related to accessibility inside Webflow.

Phase 4 - After Phase 3 is completed

Community voted solutions. We'll start building Attributes solutions based on what you tell us to build at finsweet.com/vote

Throughout all of these phases, we'll explore ways to better integrate Attributes with Finsweet Extension. Finsweet Extension allows you to do powerful workflow functions inside Designer. We want to bring this same workflow improvement to Attributes.

Today, you can copy working examples of Attributes solutions and paste them into Webflow Designer. This can help lessen the learning curve for beginners, and help people more advanced save time with implementation.

As we transition into our live working example, let's look the benefits you'll receive as a user.

⌛ Attributes will make it easier to implement solutions that would normally require code. Less time to set up, less learning curve, more structured system, better docs.

💯 Attributes is more reliable in your Webflow project. We've rebuilt our system with our best at Finsweet. No hacked together solutions, only developer-approved reliable solutions.

🚀 Better performance for your published site. Our new system is more lean, more fast, and more performant for your end users.

💪 Capable dedicated team to manage it. Finsweet is 100% focused on Webflow and our Attributes platform. We're here to support it, grow it, and make it the best add-on to Webflow.

Attributes is free. This is not something we are going to monitize in the near future. Our solutions are here to build a strong Webflow community, not to profit.

We're going to shift to the live example portion of the announcement and see how fast we can create a load more instance on a Webflow site.

We're here in Webflow Designer. First, know that this is not a step-by-step full tutorial. We have other videos for this. This is a demo to show you how quickly Attributes can be set up.

Here we have a Webflow CMS Collection List with pagination enabled.

We're going to paste the Attributes load more script file to the head of the page. Then we'll go to the Collection List and add fs-cmsload-element = "list" to it. We'll publish our page. And now we have Load More functionality on the Collection List. That's it. As I click “Load More”, the items will continue to load on the page.

We just created a powerful functionality with these two steps. Now let's customize it for our project with options. Here on the Collection List element we will add fs-cmsload-mode = "pagination". This will give us a paginated list. We publish the page. And now we have same-page pagination functionality. That's it.

This is how Attributes works. We apply attributes to elements on the page to identify them. Then we apply options to the elements to customize functionality.

That's Attributes.

We have a library of solutions ready for you to use and explore. Some solutions are more simple than others. Some some solutions require visuals. We're working on examples, screen records, and video walkthroughs.

Attributes will allow you to say "yes" to more projects. It will allow you to work with more challenging projects, with less effort.

More power, more growth, less code. We're building strong, in Webflow. That’s Attributes.

Go to finsweet.com/attributes to learn more about our solutions and how they can help you with your next project.