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

1webflow.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
2const element = await webflow.getSelectedElement();
3
4// Print element info
5if (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

Designer AbilityLocaleBranchWorkflowSitemode
canAccessCanvasAnyAnyAnyAn
Built with