Elements | Webflow Developer Documentation

The Elements tools allow you to build and modify the structure of your Webflow pages by creating elements, updating their properties, and managing their attributes directly on the canvas.

Designer tools require the MCP Bridge App to be open in the Webflow Designer. Ensure it’s connected before using these tools.

When to use

Use Elements tools to:

Build page structures: Create divs, containers, sections, and other layout elements
Add content elements: Insert text, images, buttons, and interactive components
Modify existing elements: Update attributes, styles, and properties
Navigate element tree: Select and inspect elements on the page
Set element content: Update text, images, and links

Tool details

Tool names: element_builder, element_tool

Available actions

Create elements

Build new elements on the current active page with support for nested structures.

Tool: element_builder

Parameters:

Parameter	Type	Required	Description
`siteId`	string	Yes	Site identifier
`actions`	array	Yes	Array of creation actions

Action structure:

1 {
2   "parentElementId": "parent-id",
3   "position": "append",
4   "element": {
5     "tag": "div",
6     "text": "Hello World",
7     "styles": ["container-class"],
8     "children": []
9   }
10 }

Constraints:

Maximum 3 levels of nesting depth
Unlimited children at each level
Supports: container, section, div, and all valid DOM elements

Example usage:

Create a hero section with a container, heading, paragraph, and button

Plan your element structure before building. Use element_builder for complete sections, not individual elements.

Get all elements

Retrieve all elements on the current page.

Action: get_all_elements

Parameters:

Optional: Include style properties
Optional: Include breakpoint data

Returns: Complete element tree with IDs, tags, and properties

Example usage:

Show me all elements on this page

Disable style and breakpoint data when not needed to reduce context size.

Get selected element

Get details about the currently selected element in the Designer.

Action: get_selected_element

Returns: Element properties, attributes, styles, and children

Example usage:

What element is currently selected?

Select element

Select a specific element by its ID.

Action: select_element

Parameters:

Parameter	Type	Required	Description
`elementId`	string	Yes	ID of element to select

Example usage:

Select the element with ID [element-id]

Apply styles

Apply style classes to an element.

Action: set_style

Parameters:

Parameter	Type	Required	Description
`elementId`	string	Yes	Target element
`styleIds`	array	Yes	Array of style class IDs

Supports: Combo classes

Example usage:

Apply the "button-primary" and "large" classes to this button

Add or update attributes

Add or modify attributes on an element.

Action: add_attribute or update_attribute

Parameters:

Parameter	Type	Required	Description
`elementId`	string	Yes	Target element
`name`	string	Yes	Attribute name
`value`	string	Yes	Attribute value

Example usage:

Add data-scroll="smooth" attribute to element [element-id]

Only elements with canHaveAttributes: true support custom attributes. Check element capabilities first.

Remove attribute

Remove an attribute from an element.

Action: remove_attribute

Parameters:

Parameter	Type	Required	Description
`elementId`	string	Yes	Target element
`name`	string	Yes	Attribute name to remove

Example usage:

Remove the data-scroll attribute from element [element-id]

Update ID attribute

Set or update the custom ID (#id) of an element.

Action: update_id_attribute

Parameters:

Parameter	Type	Required	Description
`elementId`	string	Yes	Target element
`id`	string	Yes	New ID value (without #)

Example usage:

Set the ID of element [element-id] to "hero-section"

Don’t include the ’#’ character when setting IDs. Use “hero-section”, not “#hero-section”.

Set text content

Update the text content of an element.

Action: set_text

Parameters:

Parameter	Type	Required	Description
`elementId`	string	Yes	Target element
`text`	string	Yes	Text content

Example usage:

Set the heading text to "Welcome to Our Site"

Set link

Configure link properties for Button, TextLink, or LinkBlock elements.

Action: set_link

Parameters:

Parameter	Type	Required	Description
`elementId`	string	Yes	Target element
`url`	string	Yes	Link destination
`type`	string	Yes	Link type: external, page, email, phone

Example usage:

Set this button to link to https://example.com

Set heading level

Change the heading level (H1-H6) of a heading element.

Action: set_heading_level

Parameters:

Parameter	Type	Required	Description
`elementId`	string	Yes	Target heading element
`level`	number	Yes	Heading level (1-6)

Example usage:

Change this heading to H2

Set image asset

Assign an image asset to an Image element.

Action: set_image_asset

Parameters:

Parameter	Type	Required	Description
`elementId`	string	Yes	Target Image element
`assetId`	string	Yes	Valid asset ID

Example usage:

Set the hero image to asset [asset-id]

Best practices

Create styles before elements

Always create style classes before building elements if you plan to apply them during creation. This ensures proper styling from the start.

Select newly created elements

After creating an element with element_builder, it’s NOT automatically selected. Use select_element to inspect or modify it.

Check element capabilities

Before modifying elements, check their capabilities:

canHaveAttributes - Custom attributes
canHaveChildren - Nested elements
canHaveStyles - Style classes

Not all elements support all features.

Use semantic HTML

Choose appropriate element types:

Headings for titles (H1-H6)
Paragraphs for text blocks
Buttons for actions
Links for navigation
Sections for page areas

Semantic HTML improves accessibility and SEO.

Avoid selecting elements in the designer while the MCP Server is making changes

In order to add elements to the canvas, the MCP Servern needs to select elements on the canvas. If you select an element while the MCP Server is making changes, the MCP server may lose track of the element it’s working on and fail.