I have been developing both client and personal websites in Webflow for many years now. The amount of heavy lifting it does through its visual UI is unbelievable. I have experimented with moving to hand-coding websites a few times since starting this journey and always find myself back in the Webflow designer within a couple hours. The speed and efficiency it provides me with is just too good to say no to.
Now bare in mind I am actually speaking about my usual custom code process here, but having spoken to many Webflow developers about this issue, it seems that most of us have a similar process and it looks something like this:
So no biggie, mission accomplished and you have everything working the way you need it to. Avoiding that extra couple hours of StackOverflow scrolling though would have been first prize. I used the OpenAI Codex Sandbox multiple times this week to do just that.
To better illustrate how this could fit into your workflow I have created a very simple example showing a Webflow challenge that requires custom code to get around and how I resolved it using the OpenAI Codex.
Here we have a list of fishing reels, ordered by rating score in the green block from highest to lowest. All data here is being pulled from a Webflow collection list through the Webflow CMS.
The problem we have here is that while we can order the fishing reels from highest to lowest dynamically through Webflow collection list settings, we can’t dynamically update the ranking numbers highlighted in red.
We could allocate a “ranking number” field to each reel item in the CMS and pull the number through that way, but this is messy. Additionally this list needs to dynamic in the sense that if a reel’s rating score changes, its position in the list should update automatically. It’s associated ranking number should follow suit.
So we have two key elements to target here. We need to loop through each “buyers-guide_top-item” and based on its position in the list, update the number value of its “ranking-number”.
All that is left to do is provide the codex with instructions and watch the magic unfold as code is generated in front of you. Based on the requirements above I am going to provide the following instructions:
“For each element with class name “buyers-guide_top-item”, update the html of its child with class name “ranking number” to match the index of this “buyers-guide_top-item”.”
The instructions input:
The code generated:
And there we have it. Based on the instructions provided we now have a script that will do the following:
How it looks on the published site:
And there we have it, the position of each reel item is now automatically reflected in the rating number on the left hand side.