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.

Here comes the “but”! As good as Webflow is, it does have its limitations. These limitations are no problem at all to someone proficient in JavaScript. Just one problem, I, along with many other skilled Webflow developers simply suck at writing JavaScript. Only because we don’t do it often enough to write it with confidence!

Thanks to all of the hype on Twitter surrounding ChatGPT and OpenAI, I recently discovered the Codex Javascript Sandbox and I think us Webflow people may well have a new superpower in our hands. It’s early days and I haven’t had as much time as I would have liked to test it. I do think however that it is a tool every Webflow developer regularly reaching into StackOverflow for hours on end for some simple JavaScript guidance should be looking into. Here’s why:

The classic webflow custom code process:

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:

1. Your site build is going swimmingly, you are making great progress and are set to deliver the project long before deadline.
2. You get to a feature or element that you underestimated and quickly make the realization that you have a hurdle that can only be crossed with the use of some custom JavaScript.
3. You know what you need your code to do, how it should be triggered and what elements it needs to interact with. You would also know how to explain it to a specialist JavaScript developer. The one thing you don’t know though is how to write it.
4. You proceed to search through StackOverflow like a mad man, hoping that someone has asked your question before and someone with superior JavaScript skill has answered it with a neat little script you can adapt to your use case.
5. An hour or two later you have the code you need, you paste it into the </body> of your page, tweak it where necessary and all is working. You are good to go.

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.

Using AI to get to your code faster:

The OpenAI Codex is an AI system that translates natural language into code. Simply put, you tell the system what you need your code to do and it writes the code for you. I played around with the Codex sample application, the Code Javascript Sandbox this week and was amazed by the results. So long as I could (somewhat) clearly explain what I needed my code to do in plain language, it would provide me with my code in seconds, saving me a lot of StackOverflow scrolling.

I am by no means saying that this tool is a replacement for true JavaScript coding skills, but for us No-Code people who are only writing a script every now and then, it looks to be incredibly powerful. I have put together an example Webflow use case below.

A Webflow use Case for the Open AI Codex

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.

The situation

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

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.

What we need

We need some JavaScript that will cycle through each CMS item in this list, target each respective rating number and update it based on its index position within the list. That way the ranking number of the first item would be 1, second item would be 2 and so on…

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”.

The solution

Now that we know what we need to do, its time to open the Codex JavaScript Sandbox and get our code. This tool has a very simple interface and we only need to worry about two elements. The instructions input where we will be writing our request and the code output panel (where our code will be output).

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:

1. Loop through each “buyers-guide_top-item” on our page to get its index
2. Based on the index of each respective “buyers-guide_top-item”, update the html (number) of it’s child with class name of “ranking-number”.

Remember that as with all custom JavaScript on Webflow, you will only see the working results on the published site so let’s see how it looks.

‍

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.

Wrapping Up

There is no substitute for true coding skills and learning real JavaScript proficiency but if you are a Webflow developer like me who:

• Understands how JavaScript and the DOM works
• Forgets basic JavaScript syntax 5 minutes after writing it
• Spends a lot of time on StackOverflow looking for solutions and existing examples of what you need

Well in that case I would definitely recommend taking a look at Codex Javascript Sandbox . It will save you time, give you confidence and help you develop your JS skill faster.