Used by 50,000+ Teams & Agencies
$128,000,000+ earned
Free until launch. No credit card needed.
Used by 50,000+ Teams & Agencies
$168,000,000+ earned
Vibe Code
with Memberstack →
Memberstack Blog

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.

Try Memberstack For Free!
December 1, 2025
0
Views
TABLE OF CONTENTS
Julian Galluzzo & Duncan Hamra

Introduction:

"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:

"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:

"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:

"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:

"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:

"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:

"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:

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

Add memberships to your project in minutes.

Learn more

Over 200 free cloneable Webflow components. No sign up needed.

View Library

Add memberships to your React project in minutes.

Get started

Related Webflow Components

Clone over 250 free Webflow components - no registration needed!
No items found.
What is Memberstack?

Auth & payments for Webflow sites

Add logins, subscriptions, gated content, and more to your Webflow site - easy, and fully customizable.

Learn more
Start building

Try out Memberstack & discover what you can build!

Memberstack is 100% free until you're ready to launch - so, what are you waiting for? Create your first app and start building today.

Start free trial