Welcome to the comprehensive guide for Webflow's Designer APIs. This documentation will provide you with a clear understanding of how to interact with the Webflow Designer using our APIs.
Overview
Webflow's Designer APIs are client-side interfaces that allow applications to manage elements, properties, text, and styles within the canvas. As these APIs operate on the client-side, they interact directly with the browser to manipulate elements, handle user interactions, and retrieve data from external sources.
Webflow Designer APIs
The Webflow Designer APIs offer several objects and methods for interacting with the Webflow Designer:
Objects
WebflowObject | This global object is your primary access point to Webflow's Designer APIs. It offers methods to interact with the Webflow Designer and manage different types of elements on the canvas. |
DOMElement | Represents an element on the Webflow canvas, providing a variety of methods for manipulating its properties, styles, and child elements. |
StringElement | Represents a string text element that can be added to the Webflow canvas. |
Style | Provides a wide range of methods for managing CSS properties across different breakpoints and pseudo-states. It's your primary tool for managing the aesthetics of your Webflow designs. |
Page | Represents a page within a site and provides numerous methods for managing its properties, including SEO and Open Graph settings. |
Folder | Represents a site folder and provides methods for managing its properties. |
Getting Started
To start using the Webflow Designer APIs, you'll need to set up your project scaffolding. Ensure you have the Webflow CLI installed, then run the following command:
webflow extension init <your_app_name>
For more detailed guidance on setting up a Designer Extension to work with Webflow's Designer APIs, please refer to our Designer Extensions: Quickstart guide.