Introduction

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.

Level up your App with App Connections

Give your users a seamless experience by integrating App Connections. Launch your App right from contextual spots, like the Element Settings panel, for smoother, more intuitive interactions.

Designer APIs

The Designer APIs offer several objects and methods for interacting with the Webflow Designer:

Objects

WebflowThis 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.
ElementsRepresents an element on the Webflow canvas, and provides a variety of methods for manipulating Element properties, content, styles, and child elements.
StylesStyles 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.
ComponentsComponents represent reusable blocks of elements, which can be modified in a single place to avoid individually revising recurring layouts.
VariablesNamed values that can be applied to sizes, colors, and fonts across a Webflow project.
CollectionsCollections of variables.
PagesRepresents a page within a site and provides methods for managing its properties, including SEO and Open Graph settings.
FoldersRepresents 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:

1// Get Selected Element
2const selectedElement = await webflow.getSelectedElement();
3selectedElement?.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.