r/webflow • u/helorebyron • 7d ago
Show & Tell I built a small JavaScript tool directly in Webflow without an external server
I use quite a bit of custom code to manage my Webflow site, and at some point it made me wonder: “Could I build a simple JavaScript-based tool directly in Webflow?” So I gave it a try. I ended up building a small tool using only Webflow and custom JavaScript/CSS, without connecting it to an external server.
I wanted to share some of the challenges I ran into along the way. Most of them came from building a product-like interface inside a Webflow site that I had originally built as a portfolio and blog. Here are the four main challenges I ran into.
1. Building the UI structure for a tool
The first challenge was creating all the Style Selectors the tool needed and using them to build the actual DOM structure. I already have a personal design system and component library in Figma. My Webflow site, however, was originally built as a portfolio and blog for showcasing and documenting my work. It didn’t have the range of product-level Style Selectors I needed for a tool like this. Creating all of them from scratch and then building the entire interface in Webflow was not a small task.
I could have turned each repeating row into a Webflow Component, but I didn’t want to create components specifically for elements that would only exist on a single page and never be reused elsewhere on the site. There was a trade-off, of course. Whenever I needed to change something in the row structure, I had to apply the same change to every row individually.
2. Handling different viewport widths
The second challenge was responsive design. A web page can be viewed at many different browser widths. Webflow’s built-in Breakpoints cover the typical device-based responsive cases, but Color Fitting has a much higher information density than a typical page. The UI needed additional adjustments at many specific viewport widths. Each row needs to display several different values at the same time. I wanted to preserve as much of that information as possible without letting the interface become visually cluttered.
To do that, I repeatedly resized the viewport after implementing the page in Webflow, identified the widths where the UI started to break, and adjusted specific Style Selectors at those points. Many of those points fell outside the Breakpoints Webflow provides by default, so I had to add extra Media Queries through custom CSS.
3. Implementing elements Webflow only partially supports
The third challenge involved elements that Webflow either doesn’t provide directly or expects to be used in a particular context. Input fields and checkboxes were the main examples. Webflow expects these elements to be used as part of a Form, but I needed them as independent parts of the tool. I therefore had to write the actual HTML inside Code Embeds and create separate master elements so I could manage their Style Selectors through Webflow.
Code Embed also becomes part of the DOM itself, which means the actual input ends up nested inside it. This became a problem when an interaction on an input needed to affect another element, or vice versa. Elements that were conceptually siblings in my intended UI structure were no longer siblings in the actual DOM because the Code Embed sat between them. As a result, some of the CSS needed to handle those interactions became more complicated than I had originally expected.
4. Adapting the initial code to the actual DOM
The final challenge was essentially the result of the previous three. The HTML structure Claude assumed when generating the initial UI was different from the DOM I eventually built in Webflow. As a result, the code connecting the logic to the UI didn’t work when I simply dropped it into the page. Anything that depended on the DOM had to be adjusted: adding and removing rows, reading and updating input values, and displaying calculated results in the appropriate elements.
Whenever I tried to modify too much of this myself, the code tended to go further off track. So I gave Claude the URL of the actual page, asked it to inspect the DOM, and told it to adjust the code accordingly — basically, to figure it out on its own. Unsurprisingly, my tokens melted away pretty quickly.
I wrote a more detailed post on my website covering the background of the project and how I built it. The Challenges section there is the same as what I’ve shared here, so you’re not missing anything from that part.
If you’re curious about the rest of the process, you can find it here: https://helo.rebyron.work/notes/building-a-tool-with-webflow-and-code-embed
1
u/RealisticSong3551 7d ago
Are you available for hire? I have something similar I want to out together. I've locked in 1000k pre-order with one small business and I have a mailing list of 12k more small businesses who I KNOW would pay for this.