All’s Well that Ends… with Code
Webflow is often touted as a powerful, no-code solution for building visually stunning websites. It combines the ease of a drag-and-drop interface with ability to add custom code, making it a popular choice among designers and developers who want more control without diving into extensive coding. —Sounds perfect, right? That’s what I thought too — until I started using it.
When I began moving my project from Figma to Webflow, I had this naive idea that I wouldn’t need to touch a single line of code. After all, it’s supposed to be a no-code platform, right? My mistake! Later I found a lot of articles where there is still a discussion either Webflow is no-code or low-code.
It turns out that when you try to add what seems like basic functionality — like a gallery with category filters and dynamically generated images from URLs — you find yourself diving deeper into coding than you expected. And honestly, as a designer who just wanted to bring my first project to life, this was more than a little overwhelming.
The Real Challenge: Making a Gallery with Category Filters
At first glance, building a simple gallery in Webflow is manageable. You can set up a CMS (Content Management System) collection, design your page, and add basic interactions. But the moment you want to add dynamic features like category-based filtering, things get complicated.
Creating a gallery where users can filter items by category seems straightforward. Webflow lets you create a CMS collection with fields like “Name,” “Image,” and “Category.” However, implementing category filtering isn’t as easy as ticking a box.
Webflow doesn’t provide sophisticated built-in filtering options for multi-category filters. You need to roll up your sleeves and use custom JavaScript to hide and show items based on the selected category. And if you’ve never touched code before, this can be pretty intimidating.
Generating Images from URLs: Another Unexpected Hurdle
Another feature I thought would be simple was dynamically generating images from URLs. For gallery websites, it’s common to use screenshots of websites instead of static images. However, this “simple” task turned into a nightmare of complexities.
First off, Webflow’s native CMS doesn’t support automatically generating images from URLs. To do this, you need an external screenshot API service like ScreenshotAPI.net or Urlbox. This means setting up an account, configuring API keys, and then — surprise! — writing custom JavaScript code to fetch and display the images.
It’s not just about copying and pasting code either. You need to handle API requests carefully, manage errors, and deal with technical issues like CORS (Cross-Origin Resource Sharing). Honestly, when I started reading about CORS, I thought, “What on earth is this?”
Adding an “Apply Filters” Button
You’d think adding an “Apply Filters” button would be a no-brainer. After all, it’s just a button that applies selected filters, right? Not quite.
Here’s the deal: You need custom code to track which categories have been selected. Webflow doesn’t have built-in state management, so tracking these selections and displaying them dynamically involves more JavaScript.
When you click the “Apply Filters” button, you have to trigger custom code that checks the current filter state and shows or hides gallery items accordingly. This isn’t something you can do with a few clicks in Webflow’s interface.
The Learning Curve and Complexity
Webflow markets itself as a no-code platform, but once you start trying to add interactive, dynamic features, you quickly realize that custom code is not just an option — it’s a necessity. Here’s what you need to know:
- JavaScript Knowledge: You’ll need a basic understanding of JavaScript to handle filtering logic, generate images using APIs, and manage user interactions.
- CSS Customization: While Webflow provides basic styling options, complex designs or dynamic styling (like showing selected tags) require deeper CSS knowledge.
- External Integrations: Working with APIs means setting up and managing external accounts, understanding API documentation, and handling API keys securely.
Final Thoughts
For a tool that’s supposed to be no-code (OMG, it was NO in their description? — Ok, we can make allowances for the fact that this is only their vision.), Webflow requires more coding skills than you might expect if you want to implement what are considered basic functionalities on modern websites.
Sorry, but it was real pain! There are still some I feel like I’m in that meme, except it’s not the designer making the mode change button — it’s the Webflow developers who are making their platform for me…
