How to Create A Webflow Designer Extension App

Build Webflow Apps with Webflow's new Designer Extensions API! In this tutorial I'll go over the basics of working with the Designer Extensions API showing you how to utilize functions on the webflow object like createDOM, getSelectedElement, createStyle, getStyleByName, setTextContent, setProperties, setStyles and more! We'll build an app from scratch and I'll walk you through the code step by step. I'm so excited for this launch and can't wait to see all the Webflow Apps that everyone builds. What apps are you excited for?
// CLONE IT (on Github)
👯‍♂️ github.com/Web-Bae/jiff-pom
// FREE resources
✂️ Code Snippet Library: code-snippets-sign-up.webflow...
🤝 CSS Nobody Told You About: www.webbae.net/css-nobody-tol...
🚗 Roadmap to learn Webflow: www.webbae.net/roadmap-to-lea...
// Premium content
🤝 Patreon: / webbae
🕸️ Advanced Webflow Course (201): www.webbae.net/product/webflo...
// Discounts
🎢 Get 10% GSAP: WEBBAE10
♣️ Creative Coding Club (My favorite GSAP lessons): www.creativecodingclub.com/bu...
// Connect
🙋‍♀️ Join the Discord: / discord
🐥 Follow Me! / webisbae
// TOPICS
00:00 Intro
00:24 Install webflow cli and initialize webflow extension
01:17 Boilerplate overview
03:06 Create app in Webflow
05:02 Customize out app exploring new APIs

[@KarimArdalan]

This is where I keep getting stuck! I installed the Webflow CLI successfully, but then when I want to run the next command to install the scaffolding I get an error that says "zsh: command not found: webflow". Can you tell me how to fix this?

[@webbae]

I pulled the command from Webflow docs but you might try installing the CLI globally instead using this command: " *npm install @webflow/webflow-cli -g* " You should also verify that you have npm properly installed. Can you share what version you are running by running " *npm --version* " in terminal?

[@KarimArdalan]

Thanks @@webbae. I had tried the same command from Webflow's site before I saw your video and had the same problem. I just tried installing it globally and still get the same error when I try to run the webflow command. I have version 9.6.7.

[@KarimArdalan]

Thanks to ChatGPT I figured out the problem. The CLI's executable path was not included in my system's PATH environment variable.

[@ozordiprince9405]

New Web Bae video just dropped 🔥🚒

[@webbae]

CALL THE FIRE DEPT! 🤣🫡

[@yaroshidi]

This is the best video ever! Well done and thank you

[@webbae]

Hey Yar glad you like it. Building some apps?!?

[@yaroshidi]

@@webbae Thanks to your video I finally made my first app! Still a bit buggy but still a work in progress.

[@webbae]

@@yaroshidi awesome! I'd love to see what you made. I have another app building using Svelte in my Patreon you might find interesting. Plan to make another more complex app and cover it in length as well. Are you using a UI library or vanilla Javascript? www.patreon.com/posts/advanced-webflow-89587498?Link&

[@aonnoysengupta]

A MUCH NEEDED TUT!!! THANK YOUUUUU

[@connorfinlayson]

great tutorial! gonna have to build something now!

[@webbae]

Thanks Connor!

[@GaurangWorkshore]

This is awesome, thank you. Similarly how to create Data client app?

[@unknowperson9679]

can you do a series on this? it would be awesome

[@webbae]

Would love to. Just need to fine the time.... 😭 What would you like to see me build?

[@nztommy]

I don't know if it already exists, but an app to change all client first-class names in a block at once is my dream to build! E.g. section_header16 -> section_home-header and it changes all of the components/inner classes of that section as well! Don't know what Webflow offers in terms of that functionality but I think I might look at it! Excellent video!

[@webbae]

You should be able to do this with folder in the finsweet extension no?

[@MultiWarbird]

You are a legend bro thank you so much

[@webbae]

Happy to help

[@JimmyCeeTV]

excellent tute!

[@heatherliu6856]

A+ B-roll

[@webbae]

Sounds like a sushi dish 😆

[@CheerfulWaffle]

Love the tutorial man! Is it possible/difficult to implement react with this? Looking to add a bit more complexity to an extension I’d like to build and I don’t like the idea of using vanilla ts 😂

[@webbae]

Don’t blame you. What framework are you looking to use? My Patreon has a guide on how to set it up with svelte and there are two good community React templates.

[@rodrigosantos2082]

I have limited knowledge, would it be too much to ask you for a tutorial on how to create a app/extension that achieves class sync like the relume extension?

[@webbae]

would still need to use a chrome extension for that. So you want a tool that when you paste a component into webflow, instead of creating "your-class 1" it reuses the existing class "your-class"? Something like that?

[@rodrigosantos2082]

@@webbae exactly I was wondering if you could teach how to create that even if it is a extension

[@rodrigosantos2082]

@@webbae Exactly i think it is such a common problem especially when copying sections or components from other client-first using projects everything just gets complicated and there is currently no solution for this problem, at least that i found, that isn't relume

[@user-sw5by6cp3v]

I want to assign the selected element's text to a variable. For example, if I select a text element like a paragraph, heading, or any other element, how can I retrieve the current text inside the element and store it in a variable?

[@webbae]

Not sure there's a way at the moment. I just took a look at the docs. AnyElement has a property textContent but it only returns a boolean :(. Maybe they can provide us a way to getTextContent similar to setTextContent. Put in a feedback request for it! That would be super useful.

[@thilaksundaram1158]

the github code isnt accessible

[@webbae]

Sorry about that. I just made the repository public so it should work now!

[@heatherliu6856]

Audio so creamy and textual 🤤

[@webbae]

🗣️