Designer Extensions offer a powerful way to expand the functionality of the Designer. You can now create tools to help Visual Designers as they’re adding designs and functionality to their sites. But, before we jump into their development, let’s walk through how Designer Extensions work.
Designer Extensions are single-page applications that are loaded via an iframe in the Webflow Designer. This iframe can host a simple script that uses the new client-side Designer APIs, or a more complex web app that connects to a backend server and other third-party services.
Designer APIs allow Apps to manage elements, properties, text, and styles on the active Canvas. These APIs interact with the browser to access and manipulate elements; handle user interactions; and retrieve data from external sources. When an App modifies an Element on the Canvas — for example, updating the padding — this change will appear to have been made directly by the user during their browser session, and will be recorded in the user's undo/redo history.
To access the Designer APIs, you’ll need to download and install Webflow’s CLI from NPM. Using the CLI, you’ll be able to create a starter project that automatically creates the basic structure, files, and code for your Designer Extension, which include the Objects and Methods of the Designer API that will allow you to manipulate elements on the Webflow Canvas. Learn more about the Webflow CLI in the Designer API Reference.
npm install -g @webflow/webflow-cli
webflow extension init your-extension-name
When you initialize your project with the Webflow CLI, we provide some example files that include a header, main content area, and footer for a basic web app. You can get started with an example project by typing the following command, and replacing it with your Designer Extension’s name.
Let’s walk through the key files needed to bring structure, style, and dynamic content to your apps. You can always learn more about an App’s configuration, structure, and necessary files in our App Structure docs.
|CSS Styling||This file defines the visual appearance of your App. It's responsible for determining how elements are positioned, their colors, typography, spacing, and overall design. |
|Dynamic Content||This file adds interactivity and dynamic behavior to your web app. It's responsible for handling user interactions, fetching data from APIs, updating the DOM, and managing the flow of your application. |
As you explore and modify the scaffold, don't be afraid to experiment and make changes. The best way to learn is by doing, and the scaffold is a safe environment to try things out.
Designer extensions elevate App functionality by directly interacting with elements on the Canvas. Let’s explore how you can use a Designer Extension and our Designer APIs to create, modify, and delete elements on an active Canvas.
Our Designer APIs interact with the canvas via user-friendly objects and methods via The Webflow Object. With these APIs you're able to interact with existing elements, or add new elements to the canvas.
Interacting with elements on the canvas typically involves three steps: referencing, staging, and syncing.
|1. Getting a reference to an element||2. Staging changes to an element||3. Syncing changes back to the Designer|
|You can get a reference to an element on the canvas by calling
||Once you have a reference to an element, you can stage changes to it using various methods on the element object. For example, you can set a custom attribute on the element using
||After staging your changes, you can sync them back to the Designer by calling
In addition to manipulating existing elements, you may want to give your users the ability to add new elements to the Canvas. To do this, you can call the
createDOM method and pass the HTML tag of the type of element you’d like to create.
For example, you can create a new
div element with the following code:
const newDiv = webflow.createDOM("div");
You can then stage changes to this new element and sync them back to the Designer, just like with existing elements.
By understanding and using these methods, you'll be able to create powerful and interactive Designer Extensions that can enhance the Webflow experience for users.
Updated 3 months ago