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:
- Creates and manages elements and components on the canvas
- Defines and modifies styles and variables
- Handles asset management
- Structures site architecture with pages and folders
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.
The main entry point for accessing and managing Designer objects and settings.
Create and manipulate elements on the canvas, including their properties, content, and styles.
Manage reusable CSS classes to control the visual appearance of elements across your site.
Create and modify reusable element groups to maintain consistency across your designs.
Define and manage global values for numbers, percentages, sizes, colors, and fonts.
Manage page properties, SEO settings, and site structure.
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.
Referencing objects
Modifying objects
-
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.
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.