WF Weekly#WF Weekly

WF Weekly - Episode 24

Step into the future of web app development with Webflow's new App Gen beta. This tutorial is designed for creators looking to build impressive web applications without getting bogged down in code.

Julian Galluzzo & Duncan Hamra·Contributors
|
December 1, 2025·1 min read

Introduction:

__wf_reserved_inherit
"Step into the future of web app development with Webflow's new App Gen beta. This tutorial is designed for creators looking to build impressive web applications without getting bogged down in code. You will learn how to design pixel-perfect UI components in Webflow, seamlessly import them into your application, and make quick iterations to produce client-ready dashboards. This guide is ideal for designers transitioning into full-stack web app development using Webflow's latest AI-powered tool."

Building the Sidebar UI in Webflow:

__wf_reserved_inherit
"I literally just built the Web Flow UI, but I'm really interested to see if we can bring this in. So, first things first, what we need to do is actually turn this into a component."

Creating Component Props for Customization:

__wf_reserved_inherit
"So, I've set up component props for all of the links along with the text that goes in them. I didn't do it for the icons. Actually, these are embedded icons and I couldn't quite figure out right off the bat. I am a chronic under user of components."

Importing UI into App Gen Dashboard:

__wf_reserved_inherit
"So, it is indeed using my sidebar component. That is awesome. And it is using my site variables, although not in the best way. I mean, this is pretty ugly. Immediate problem here with the sidebar is it's super skinny and there needs to be a container set to 100 view port width with the sidebar being full width. Like right now, it is just absolutely massive. So, I'm going to have to ask it to go ahead and fix that. And we'll see what we get."

Updating Links and Using Props in App Gen:

__wf_reserved_inherit
"So one prompt and it managed to update the links. Now you could just go ahead and go into code and change this yourself. Let's say we change this from like dashboard to home home and then I assume to save it you would do command S like with most things. So anyways, then if I go back into preview, as we can see, I spelled home wrong."

Modifying Components and Syncing Changes:

__wf_reserved_inherit
"All right, so I have updated my sidebar component here in the designer and now I'm just going to click on AppGen. And something that the AppGen AI said to me kind of led me to believe that this just happens automatically. You don't actually need to, you know, say anything. you don't need to resync the components. That would be super cool. So, if that's the case, then I'm going to be pretty happy. All right. So, indeed, my sidebar has been updated."

Creating Code Components from App Gen:

__wf_reserved_inherit
"It's created. It's ready to be used as a Web Flow code component. I'm assuming it's not going to be already able to be synced up."

Final Thoughts and Future Potential:

__wf_reserved_inherit
"Anyways, so at the end of the day, my take on this entire thing, everything that we've done in this video is this is super exciting. I mean, if you're building stuff for clients, you can start to bring web apps into your offerings and be confident that you're not just playing around with something like again, let's say Claude Code or Cursor, which are amazing, but you don't really know how to use them. Like when you're using AppGen, you have the control in that sense. You have the ability to build components pixel for pixel in web flow which is a tool that you you know, know very very well, and then bring them into your app."

Topics

#WF Weekly

Written by

Julian Galluzzo & Duncan Hamra

Contributors

Related Articles

WF Weekly

WF Weekly - Episode 28

Learn how to overcome integration issues with Webflow components and create production-ready apps that leverage your CMS data for seamless functionality.

Julian Galluzzo

WF Weekly

WF Weekly - Episode 27

Excited about the new Finsweet extension now live as a Webflow App? Whether you're a seasoned Webflow designer or just getting started, this tool could revolutionize how you build responsive, high-performance sites.

Julian Galluzzo

WF Weekly

WF Weekly - Episode 26

Discover how Webflow's new beta AI tool, AppGen, revolutionizes coding custom features directly in your Webflow site. In this hands-on tutorial, I build an AI-powered financial glossary for my production budgeting tool website, tackling real challenges like API setup and component integration to del

Julian Galluzzo

Dec 12, 2025