Introduction

Webflow’s Designer APIs are powerful client-side interfaces that enable Designer Extensions to interact with the Webflow interface. These APIs allow Apps to automate common design tasks, manipulate elements on the canvas, manage styles and components, and enhance the site-building workflow - all through code rather than manual actions.

What you can do with the Designer APIs

Using the Designer APIs, you can create a Webflow App that:

Designer API objects

The Designer APIs provide several objects that give Apps control over the Webflow interface. Each object serves a specific purpose and contains methods to help you design sophisticated, automated workflows for Designers, Content Managers, and other teams working in Webflow.

How to use the Designer APIs

To start using the Designer APIs, register a Webflow App to your Workspace and create a Designer Extension using the Webflow CLI. Once you have your Designer Extension running locally on your Webflow project, you can start using the Designer APIs to create elements, styles, components, and more.

How the Designer APIs work with Webflow

As mentioned, Designer APIs interact with Webflow just as a user would - creating elements, applying styles, and modifying properties and more. You can use the Designer to manage existing objects or create new ones.

To work with objects in your Webflow project, you’ll need to reference the object using an appropriate method, and then make changes using the available methods.

  • Existing Objects: Get an existing object using an appropriate GET method. For example, to get the currently selected element, you can use the webflow.getSelectedElement() method. You can see all the methods available for retrieving objects in the Designer API Reference.

  • New Objects: Create a new object using an appropriate CREATE method. When you create a new object, Webflow will always return a reference to the new object. For example, to create a new element, you can use the element.after() method. You can see all the methods available for creating objects in the Designer API Reference.

Getting a reference to a resource
`webflow.getSelectedElement()` returns a reference to the currently selected element.

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.

Leverage TypeScript for Enhanced Type Checking

The Designer APIs are built with TypeScript definitions, providing comprehensive type information for all objects and methods. By using TypeScript instead of JavaScript, you’ll automatically get access to these definitions which enable:

  • 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.