Finally! A VS Code Editor Inside Webflow

Webflow finally has a powerful code editor that allows you to edit your code just like you're in VS Code. It's Devmo plugin by our old friends finite and it's pretty great. Dev mode quickly update your HTML and CSS using a code editor inside web flow. Some use cases instantly find classes, attributes, tags, and styles. Hit control or command plus F and type what you want to find. Quickly add attributes without the need to select manually the elements. For example, add attributes list load to your CMS list. Type FS list element equals list and FS list load equals more. Done. Bulk text change. Imagine you have a lot of buttons in your page and you would like to change all of them at the same time. Select the parent element. Find the text content of the button. Select it. Control or command plus D. Change the text. Save changes. Done. That's really cool. Bulk classes change. Now imagine you have all these titles of the page with heading style H2 and you would like to change them to the class heading style H3. Controller command plus F. Add the class you want to find. Now add the class you want to replace and click to replace all. Save changes. You get the picture. Yeah, that's really cool. So, not quite, you know, the fullyfledged dev experience, but this is already better than the in-house Web Flow editor. It's awful, the in-house web editor and code editor, sorry, in Web Flow. What I quite liked there is that you saw, you know, they they chose the parent wrapper. So now this gives you the entire this is the code that's that's been created under the hood as your no coding. So this is this is obviously something we've never seen before. You you you get this sort of editor when you have an embed element or well yeah just an embed element, right? You don't get it for the page, but you can see the whole thing now. And I think this is great and I I foresee um AID, you know, updates to this to actually use AI to vi vibe it out. Um it would be interesting because of course Web Flow creates HTML in a certain way and I'm not sure how malformed HTML will, you know, how that will render out on the canvas and whatever. But regardless, I can see AI adding here. I can see just more VS Code like um EMTT predictions, things like that just being added to here. Really good first step to this this dev mode experience. And my heart kind of goes out to Miyagi who gave up on the original vision of Miyagi which is a vibe code experience with them um web flow cannibalized there. They were going to focus on the coding experience. Now dev mode has come out. Now this is not to say that web flow would come out with their own version of this but you know this is this is already they've launched you know at the end of the day Miyagi has not launched their coding experience. So well I guess they have but they just haven't doubled down on that just yet. So yeah really cool. So the pricing is six bucks a month for everything and if you pay your is this across all sites. So this is you can add this to any site. Good. Yeah. Seems like they've addressed the pricing here because this is this is doesn't look so painful. Yeah. Do I need one for each site? No. Fin extension plan is per workspace. Yeah. Okay. I don't know if it's like per Web Flow workspace or per their own workspace. uh Finsswuite I I don't know how to say this nicely but they are not really good with naming because this thing it's called finuite extension this is a web flow app so we have a web flow app called fininsswuite extension and previously we had the finite extension which was a finite um chrome extension this what you see on my screen this one on the this is they move the chrome extension into an app seemingly. Yes. Yes. And they still call it extension and it's not maybe maybe to not confuse people but this is I argue is more confusing because they should be looking onward and like to the people that will join who are going to see it as a web flow app not as a Chrome extension. Uh anyway, with the old thing, you can still access the head and footer code to your project [snorts] from anywhere you are in the designer, which is really sweet. And the bulk redirects. So, the rest of the stuff has been moved here um if we like it or not. I wish they would not do this to us, by the way. I wish that they would keep the extension as it was and add this as a as something that extension a new extension because right now I need to also install this on every uh site. It it takes a click or two but still the extension was just there once you would install it. But yeah, it's pretty cool and I'm sure I will be using it. I'm not sure if I will pay for it honestly. It's not a lot of money, but it adds up. These things add add up and I don't know how it works with my team. Uh, do I need to pay per person? Yeah. Is this is this a thing of vibe caring your own extension? You know, what's the process like of getting an extension into web all this honestly? Yeah. You've got the you've got the um Web Flow documentation, API documentation. But all this is doing is leveraging the documentation and saying, "Yeah, this is part of a larger conversation on my show, Command AI, which we stream live every single week. We discuss the news and all things related to AI in the world of design and web. Catch us next week and join in the banter.