3. Interacting with the Designer

Interacting with the Webflow canvas is a key part of creating your Designer Extension. This document outlines how you can use the Designer APIs to interact with the canvas, including creating, modifying, and deleting elements.

Accessing the Designer APIs

Webflow provides access to its Designer APIs via a globally accessible object named webflow. You'll use this object to interact with elements on the canvas. With these APIs you're able to interact with existing elements on the canvas, or add new elements to the canvas via the DOMElement Object.

Interacting with Elements

Interacting with elements on the canvas typically involves three steps:

1. Getting a reference to an element 2. Staging changes to an element 3. Syncing changes back to the Designer
You can get a reference to an element on the canvas by calling webflow.getSelectedElement(). This method returns a Promise that resolves to the currently selected element. Once you have a reference to an element, you can stage changes to it using various methods on the element object. For example, you can set a custom attribute on the element using setCustomAttribute() After staging your changes, you can sync them back to the Designer by calling save() on the element
const el = await webflow.getSelectedElement(); el.setCustomAttribute("my-attribute", "my-value"); javascript el.save();
Step 1 Step 2 Step 3

You won't be able to access:

  • DOM/Styles/Components that don't belong to the site or other site pages
  • Web Data APIs by default (a Data Client is needed)
  • Metadata about the user, workspace, or team

Creating new Elements

In addition to modifying existing elements, you can also create new ones using the Designer APIs using the DOMElement object. For example, you can create a new DOM element with a specific tag:

const newElement = webflow.createDOM("div");

You can then stage changes to this new element and sync them back to the Designer, just like with existing elements.

Refer to the Designer APIs Reference for more details on the webflow object and the different types of elements you can interact with.

By understanding and using these methods, you'll be able to create powerful and interactive Designer Extensions that can enhance the Webflow experience for users.