Webflow's Designer APIs are client-side interfaces that allow an App to automate many of the actions a user would take while building a site in Webflow. Designer Extensions are static, single-page applications that use the Designer APIs to create and style elements on the canvas, as well as manage pages and key design tools like variables and components.
Migrating to the latest version of the Designer APIs
This documentation refers to the newly released new version of the Designer APIs. Please see this guide for more information on migrating to the newest version.
Designer APIs
The Designer APIs offer several objects and methods for interacting with the Webflow Designer:
Objects
| Webflow | This global object is the primary access point to Webflow's Designer APIs. It offers methods to create and retrieve objects in the Designer, get site information and settings, and handle user interactions. |
| Elements | Represents an element on the Webflow canvas, and provides a variety of methods for manipulating Element properties, content, styles, and child elements. |
| Styles | Styles are Webflow Classes. Styles contain methods for managing a collection of CSS properties which can be applied to multiple elements on a site. Styles are the primary tool for managing the aesthetics of Webflow designs. |
| Components | Components represent reusable blocks of elements, which can be modified in a single place to avoid individually revising recurring layouts. |
| Variables | Named values that can be applied to sizes, colors, and fonts across a Webflow project. |
| Collections | Collections of variables. |
| Pages | Represents a page within a site and provides methods for managing its properties, including SEO and Open Graph settings. |
| Folders | Represents a site folder and provides methods for managing its properties. |
API Playground
Start exploring the capabilities of the Designer API by diving into our API Playground App. With the App installed on your site, you can send requests and experiment with the different API categories and methods.
Getting Started
To start using the Webflow Designer APIs, you'll need to set up your project scaffolding. Ensure you have the latest version of 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.
Best Practices
Using await with Asynchronous Methods
Many methods in this API are asynchronous, returning a Promise in the response. For cleaner and more streamlined code, it's recommended to use the await keyword. This practice pauses your code execution until the Promise is fulfilled, simplifying the handling of asynchronous operations and making your code more readable and easier to follow.
Use Optional Chaining (?) for Null Checks
When working with asynchronous methods in the API, which return a Promise, use optional chaining to access an object's properties or to call a function. For instance, consider a scenario where you are awaiting a response from an asynchronous method:
// Get Selected Element
const selectedElement = await webflow.getSelectedElement();
selectedElement?.before(webflow.elementPresets.Blockquote);
In this example, getSelectedElement() is an asynchronous operation. The use of await ensures that the code execution pauses until the Promise is resolved. Following this, the Safe Navigation Operator (?.) is used to safely access the append method, guarding against the possibility that selectedElement might be null or undefined.
Leverage TypeScript for Enhanced Type Checking
TypeScript offers robust type-checking features that go beyond the capabilities of an IDE's IntelliSense. Use this when working with elements that have specific properties, as Webflow has included comprehensive type definitions for all the objects and methods available in the API. Leverage typescript to:
- Reduce Errors: TypeScript's static type checking helps catch errors early in the development process, reducing the chances of runtime errors.
- Set Clear Expectations: It provides a clearer understanding of the structure of data being used, making the code more readable and maintainable.
- Improve the Development Experience: Leveraging TypeScript's features such as interfaces and types can greatly enhance your experience by providing explicit contracts for API data structures.