The Webflow Object

The Webflow Object is a high-level interface designed to facilitate interactions with the Webflow Designer. Use the Webflow Object for:

  • Creating and retrieving design elements.
  • Managing event subscriptions and notifications.
  • Adjusting Extension size.
  • Accessing specific site and user information.

This documentation is designed to provide comprehensive insights and practical examples to maximize your use of the Webflow Object.

To enhance your understanding, we have organized the Webflow Object’s methods into relevant sections corresponding to specific functionalities. For instance, details on manipulating component objects through the Webflow Object can be found in the ‘Components’ section. For an exhaustive list of all methods available with the Webflow Object, please refer to the Designer API type definitions.

Creating and Retrieving Objects

The Webflow Object is your starting point for creating and managing key objects in the Webflow Designer. It allows for the creation and retrieval of Elements, Styles, Components, Pages and more. After retrieving these objects, you can manipulate their properties and settings through the object’s respective methods to suit your app’s needs.

To illustrate, let’s walk through creating a DIV block in the designer. In this example, we’ll use the Webflow Object to retrieve the currently selected element. Then, we’ll use the Element Object methods, to insert a new DIV block onto the canvas and set its text content.

1// Get the Selected Element
2const selectedElement = await webflow.getSelectedElement()
3
4// Insert the DIV block above the selected element, then set text content
5const newDiv = await selectedElement.before(webflow.ElementPresets.DivBlock)
6await newDiv.setTextContent('Hello World')

To find more information on creating and retrieving specific objects, navigate to the object’s section in the documentation, or follow the links below:

Information and Settings

The Webflow Object provides direct access to site information and settings in the Designer. This feature allows apps to adjust to different user configurations, increasing their adaptability and customization. Additionally, it offers functionality to dynamically modify your app’s size and layout, ensuring it fits well within the user’s Designer Environment.

User Events and Interactions

Leverage the event-handling capabilities of the Webflow Object to elevate user interactions and experiences within your app. By integrating responsive design elements that respond to user actions in the canvas, you can enhance the app’s usability and intuitiveness. Employ notifications and alerts for real-time user feedback and guidance, thereby enriching their engagement with the Webflow Designer.