I’m Building a Tiny Open Source Webflow Component Library
So I’ve spent quite a few hours the last couple of weeks building out a (currently quite tiny) open source component library for Webflow.
It’s basically just a section of my personal site (made in Webflow) on which I upload a few semi-styled, minimalist, typography focused Webflow components every day that users are able to copy & paste directly into their own Webflow projects without having to sign up or pay any premiums.
The site is fully static using the Webflow CMS, which is hosting all the data needed for all components. This means that there’s no external databases, servers or applications needed.
This is a short article going through how I developed the whole thing. Let’s go.
Developing the components
All components are developed in one large Webflow project. This project contains a super-simple style guide (for now) and a separate page for each component category.
Each component is then developed as regular, with the exception of using a prefix for all classes, as well as creating unique classes for most element of each component.
Prefix
My SBR (Shaped by Robin) prefix is used for both Classes and Interactions for all components. The prefix is used in order to not interfere with any of the current classes in a users Webflow project.
Unique classes
I’m using unique classes for each element in each component so that a user can customize a component without having to worry about any of the other components getting messed up.
This does indeed create a huuge, somewhat unnecessary, stylesheet, but I feel like it’s important to make sure more “beginner-level” developers can use the library properly (which I’m guessing will be the main user base).
It also decreases the use of multi-layered combo classes and class interference / class duplication when pasting a component into a project.
There are however some classes that I re-use, such as:
- Button groups
- Icon sizes
- Display headings
- Body paragraphs
- Containers
Developing the library itself in Webflow
It’s actually quite simple to develop a site like this in Webflow, especially by using the CMS. In this case, I only have two collections:
- Components
- Component categories
On my components page I’m listing out all components in a grid with pagination. Each category gets its own template page listing out components of a specific category in the same type of grid.
Simple.
The copy & paste functionality
If you look closely at the image above, you can see that there’s a field called TXT. This is a file field in which I’m uploading a TXT file of the component in question.
If you need help on how to do this, Flowout has written a great guide on basically everything you need to know:
- Export components from a Webflow project into JSON files
- Upload components
- Create the copy & paste functionality
The only thing I’m doing different is turning my all JSON files into TXT files, since JSON files aren’t supported by the Webflow CMS. My setup basically goes like this:
- A user clicks on a button to copy a component
- The components’ TXT file is fetched through the Webflow CMS URL of the uploaded file
- The content is converted back to JSON
- The converted JSON content is pushed to the users clipboard
This makes users able to paste the component into their own Webflow projects seamlessly.
Component ID
On my component library pages I render a grid of cards, each card having its unique copy button. Every rendered component card also has a Code Embed element, containing all the code needed for a user to copy each component.
If you take a look at the collection in the image two images above, you might notice a field called Component ID. The Component ID is a string that has to be unique for each component.
This ID is used to:
- Make variable names in each Code Embed unique
- Give each copy button element a unique ID
The Code Embed for a component looks like so:
It’s basically a copy of the setup code by Flowout, but using the Component ID wherever it’s needed.
You might also notice that I’m using the URL from my text file field called TXT, turning the URL of it into a string stored in a variable and using it to fetch the component using the fetch API in Javascript. This is slighly different than how Flowout is doing it, but seems to work great.
Conclusions
Hopefully this guide gave you a few pointers on how you could develop something like this yourself in Webflow.
Feel free to check out the whole library over here, and send in some feedback or component requests through the little “Send Request” button in the dark announcement bar.
Also feel free to write a comment or send me an email if you have any questions.
Bye bye.
