> This page is for Designer API.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Element properties & methods

> Learn about element properties and their related methods in the Webflow Designer API

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:

```typescript
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](/designer/reference/elements/getChildren)

Methods for adding, retrieving, and managing child elements.

#### [Styles](/designer/reference/elements/styles)

Methods for applying and managing styles on elements.

#### [Text Content](/designer/reference/elements/text-content)

Methods for setting and manipulating text content.

#### [Attributes](/designer/reference/elements/attributes)

Methods for working with HTML attributes.

#### [Custom Attributes](/designer/reference/elements/custom-attributes)

Methods for working with custom HTML attributes.

#### [App Connections](/designer/reference/app-intents-and-connections)

Methods for connecting elements with external apps.

#### [Display Name](/designer/reference/elements/display-name)

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

## Best practices

1. **Always check properties before using methods**:
   ```typescript
   if (element?.styles) {
     // Now it's safe to use style methods
     await element.setStyles([myStyle]);
   }
   ```

2. **Combine property and type checks when needed**:
   ```typescript
   if (element.type === "Paragraph" && element.textContent) {
     await element.setTextContent("New paragraph text");
   }
   ```

3. **Handle missing properties gracefully**:
   ```typescript
   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);
   }
   ```