Designer Tools

Elements

Create and manipulate elements on the Webflow Designer canvas using the Elements tools. These tools work with the live Designer interface to build and modify page layouts.

The MCP Companion App must be open in the Webflow Designer for these tools to function.

Element Builder

Use the Element Builder to create nested elements on the current page. Each action supports up to three levels of nesting. For more complex layouts, make multiple calls to element_builder to construct the element tree incrementally.

After an element is created, it is not automatically selected. Use the element_tool with the select_element action to select and inspect it.

Tool: element_builder

siteId
stringRequired

Unique identifier for the site.

actions
arrayRequired

An array of element creation actions.

parentElementId
objectRequired

Object containing the component and element IDs of the parent.

creationPosition
'append' | 'prepend'Required

Position to create the new element relative to the parent.

elementSchema
objectRequired

The definition of the element to create.

type
stringRequired

The element type (e.g., “div,” “section,” “h1,” “p”).

children
array

An array of nested child elementSchema objects.

Only container-type elements like div, section, and container can have children. Element nesting is limited to 3 levels deep.

Request Example
1{
2  "siteId": "628f4b034872242526c8f62a",
3  "actions": [
4    {
5      "parentElementId": { "component": "...", "element": "..." },
6      "creationPosition": "append",
7      "elementSchema": {
8        "type": "div",
9        "children": [
10          { "type": "h1", "children": [{ "type": "text", "text": "Hello World" }] }
11        ]
12      }
13    }
14  ]
15}

Element Tool

The element tool supports multiple actions on elements, such as reading properties, selecting, and updating.

Tool: element_tool

siteId
stringRequired

Unique identifier for the site.

actions
arrayRequired

An array of element actions to perform. See action examples below.

Actions

Get All Elements

Get a list of all elements on the current page.

query
'all'Required

Set to “all” to retrieve all elements.

includeStyleProperties
boolean

Whether to include style properties in the response.

includeAllBreakpointStyles
boolean

Whether to include styles for all breakpoints.

Action Example
1{
2  "actions": [
3    {
4      "getAllElements": {
5        "query": "all",
6        "includeStyleProperties": false
7      }
8    }
9  ]
10}

Get Selected Element

Get detailed information about the currently selected element.

Action Example
1{
2  "actions": [
3    { "getSelectedElement": true }
4  ]
5}

Select Element

Select an element on the canvas by its ID.

component
stringRequired
Component ID.
element
stringRequired
Element ID.
Action Example
1{
2  "actions": [
3    {
4      "selectElement": {
5        "component": "...",
6        "element": "..."
7      }
8    }
9  ]
10}

Add or Update Attributes

Add or update attributes on an element.

component
stringRequired
Component ID.
element
stringRequired
Element ID.
attributes
arrayRequired

An array of attribute objects, each with a name and value.

This action is only valid if the element’s metadata shows canHaveAttributes: true.
Action Example
1{
2  "actions": [
3    {
4      "addOrUpdateAttribute": {
5        "component": "...",
6        "element": "...",
7        "attributes": [{ "name": "data-custom", "value": "123" }]
8      }
9    }
10  ]
11}

Set Text

Set the text content for a text-based element (e.g., “p,” “h1,” “span”).

component
stringRequired
Component ID.
element
stringRequired
Element ID.
text
stringRequired
The text content to set.
Action Example
1{
2  "actions": [
3    {
4      "setText": {
5        "component": "...",
6        "element": "...",
7        "text": "New Heading Text"
8      }
9    }
10  ]
11}

Remove Attribute

Remove one or more attributes from an element.

component
stringRequired
Component ID.
element
stringRequired
Element ID.
attribute_names
arrayRequired

An array of attribute names to remove.

This action is only valid if the element’s metadata shows canHaveAttributes: true.
Action Example
1{
2  "actions": [
3    {
4      "remove_attribute": {
5        "component": "...",
6        "element": "...",
7        "attribute_names": ["data-custom"]
8      }
9    }
10  ]
11}

Update ID Attribute

Update the HTML id attribute of an element.

component
stringRequired
Component ID.
element
stringRequired
Element ID.
new_id
stringRequired
The new ID to set.
Do not include the # character in the new_id string.
Action Example
1{
2  "actions": [
3    {
4      "update_id_attribute": {
5        "component": "...",
6        "element": "...",
7        "new_id": "my-unique-id"
8      }
9    }
10  ]
11}

Set the link for an element like a Link Block, Button, or Text Link.

component
stringRequired
Component ID.
element
stringRequired
Element ID.
linkType
'url' | 'file' | 'page' | 'element' | 'email' | 'phone'Required

The type of link to set.

link
stringRequired

The link destination. The format depends on linkType.

Action Example
1{
2  "actions": [
3    {
4      "set_link": {
5        "component": "...",
6        "element": "...",
7        "linkType": "url",
8        "link": "https://webflow.com"
9      }
10    }
11  ]
12}

Set Heading Level

Change the heading level of a Heading element (e.g., from h2 to h3).

component
stringRequired
Component ID.
element
stringRequired
Element ID.
heading_level
1 | 2 | 3 | 4 | 5 | 6Required

The heading level to apply (1-6).

Action Example
1{
2  "actions": [
3    {
4      "set_heading_level": {
5        "component": "...",
6        "element": "...",
7        "heading_level": 2
8      }
9    }
10  ]
11}

Set Style

Apply one or more existing styles to an element.

component
stringRequired
Component ID.
element
stringRequired
Element ID.
styleNames
arrayRequired

An array of style names to apply.

This action replaces all existing styles on the element. To create styles, use the style_tool.
Action Example
1{
2  "actions": [
3    {
4      "setStyle": {
5        "component": "...",
6        "element": "...",
7        "styleNames": ["Button", "Primary-Button"]
8      }
9    }
10  ]
11}

Set Image Asset

Set the image source for an Image element.

component
stringRequired
Component ID.
element
stringRequired
Element ID of the Image.
imageAssetId
stringRequired

The ID of the asset to use.

Retrieve available asset IDs using asset_tool.
Action Example
1{
2  "actions": [
3    {
4      "setImageAsset": {
5        "component": "...",
6        "element": "...",
7        "imageAssetId": "628f4b034872242526c8f65c"
8      }
9    }
10  ]
11}