Get selected element

webflow.getSelectedElement()

Retrieve the element that the user has selected in the Webflow Designer.

The returned element object provides access to all element properties (like type, id, and styles) and exposes methods such as getChildren(), getStyles(), and getCustomAttributes() for working with the element programmatically.

Syntax

1
webflow.getSelectedElement(): Promise<null | AnyElement>

Returns

Promise<AnyElement | null>

A Promise that resolves to one of the following:

• AnyElement: An object that represents the various element types available in a Webflow project. See a full list of supported element types in the Designer Extension type definitions.
• null: If an element is not currently selected in the Designer

Example

1
// Get Selected Element
2
const element = await webflow.getSelectedElement();
3
4
// Print element info
5
if (element) {
6
  console.log(`Selected Element ID: ${element.id}`);
7
  console.log(`Element type: ${element.type}`);
8
9
  // If the element has children, print the child elements
10
  if(element.children){
11
    const children = await element.getChildren();
12
    console.log(`Child elements: ${children}`);
13
  }
14
15
} else {
16
  console.log("No element is currently selected.");
17
}

Designer Ability