Webflow Designer API: Element Properties & Methods

Elements in Webflow have properties that determine what functionality they support. These properties are boolean flags that indicate whether an element can have certain features like children, styles, or text content. Each property unlocks a set of related methods that you can use to manipulate the element.

Core element properties

All elements have a set of core properties that determine what actions you can perform on them:

Property	Description	Examples of Elements with Property
`children`	Whether the element can contain child elements	`DivBlock`, `Section`, `Container`
`attributes`	Whether the element has settable HTML attributes	Most elements
`customAttributes`	Whether the element can have custom HTML attributes	Most elements
`styles`	Whether the element can have styles applied	Most elements
`textContent`	Whether the element can contain direct text content	`Paragraph`, `Heading`
`appConnections`	Whether the element can connect with external apps	`Image`, `FormForm`
`displayName`	Whether the element has a custom Navigator display name	`DivBlock`, `Section`, `Heading`, `Image`
`visibility`	Whether the element can be made visible or invisible	Many elements but not `Iframe`, `ComponentInstance`, structural elements such as `Body`, `Meta`, and `Title`, and code-injection elements such as `CustomCode`
`domId`	Whether the element has a settable HTML `id` attribute	All elements except `ComponentInstance`

Checking element properties

Before using property-based methods, you should always check if the element has the required property:

const element = await Webflow.getSelectedElement();
// Check if element can have children
if (element?.children) {
  // Safe to use children-related methods
  await element.append(Webflow.elementPresets.Paragraph);
}
// Check if element can have styles
if (element?.styles) {
  // Safe to use style-related methods
  await element.setStyles([myStyle]);
}

Property-based methods

Each element property unlocks specific functionality that you can use in your Designer Extension:

Children

Methods for adding, retrieving, and managing child elements.

Styles

Methods for applying and managing styles on elements.

Text Content

Methods for setting and manipulating text content.

Attributes

Methods for working with HTML attributes.

Custom Attributes

Methods for working with custom HTML attributes.

App Connections

Methods for connecting elements with external apps.

Display Name

Methods for reading and setting the Navigator display name of an element.

Best practices

Always check properties before using methods:

if (element?.styles) {
  // Now it's safe to use style methods
  await element.setStyles([myStyle]);
}

Combine property and type checks when needed:

if (element.type === "Paragraph" && element.textContent) {
  await element.setTextContent("New paragraph text");
}

Handle missing properties gracefully:

try {
  if (!element.children) {
    console.log("This element doesn't support child elements");
    return;
  }
  await element.append(Webflow.elementPresets.Paragraph);
} catch (error) {
  console.error("Error adding child element:", error);
}