Changelog

Expanded CSS property support

The Designer API now supports a significantly expanded set of CSS properties. Whereas previously you could only set CSS properties that were natively supported in Webflow and shown in the Styles panel, you can now use nearly any CSS property with functions such as style.setProperties and style.setProperty.

Also, you no longer need to use long-form property names exclusively; shorthand properties such as inset, flex, flex-flow, gap, grid, border, and background are now supported alongside their long-form equivalents.

For more information, see Set style properties.

For the full list of supported properties and accepted types, see Style Properties.

New functions for accessing styles and manipulating Div Block element tags

Retrieve styles by paths

The function webflow.getStyleByName() can now accept a nested style path array to get a style, instead of only a single style name. If you have different styles with the same name within a site, you can pass an array with the name of the parent style and the name of the child style to identify a specific style, as in this example:

1
const retrievedStyle = await webflow.getStyleByName(["fa-cms-filter-container", "fa-hide-cms-filter"]);

This change is backward-compatible because the function still accepts a single style name.

For more information, see Get style by name or path.

Get and set Div Block element tags

The new functions element.getTag() and element.setTag() allow you to get and set the element tag on a Div Block element, which sets its purpose on the page, such as header, footer, or figure.

For more information, see Get Div Block element tag and Set Div Block element tag.

Retrieve the parent of a style

The new function style.getParent() returns the parent style of a combo class.

For more information, see Get parent style.

New Element Inspection API

We’re introducing a new Element Inspection category in the Designer API, starting with the getElementSnapshot method that allows you to capture visual snapshots of elements on the canvas.

What’s new

Element Inspection

A new API category focused on inspecting and capturing element data:

• webflow.getElementSnapshot(element) - Captures a visual snapshot of any element and returns it as a base64 encoded PNG string with the data:image/png;base64, prefix included

Use cases

The getElementSnapshot method enables several powerful workflows:

• Visual documentation: Capture element snapshots for design documentation or style guides
• AI-powered design analysis: Send element snapshots to AI models for visual analysis and suggestions
• Design comparison: Capture before/after snapshots during design iterations
• Thumbnail generation: Create previews of components or sections

Example usage

1
const selectedElement = await webflow.getSelectedElement();
2
const img = document.getElementById("snapshot-image") as HTMLImageElement;
3
4
if (selectedElement) {
5
  const snapshot = await webflow.getElementSnapshot(selectedElement);
6
7
  if (snapshot) {
8
    // Set the base64 string as the image source
9
    img.src = snapshot;
10
  }
11
}

Learn more

For complete documentation, see the Get Element Snapshot reference.

Webflow's MCP server now supports the Designer

Webflow’s MCP server now supports the Designer API, enabling AI agents to interact directly with the Webflow Designer canvas in real-time. This pivotal update expands the server’s capabilities beyond content management, opening new possibilities for AI-assisted visual design.

What’s new

The MCP server now includes tools that connect directly to the Webflow Designer, allowing AI agents to:

• Create and modify design elements on the canvas
• Manage styles, variables, and components
• Work with responsive breakpoints and layouts
• Access real-time design data and structure

Companion app for Designer connectivity

A new companion app automatically installs during authorization and enables seamless communication between your AI agent and the Designer:

• Automatic setup: The companion app installs automatically when you authorize the MCP server
• Real-time sync: Maintains a persistent connection between your AI agent and active design sessions
• Designer access: Must remain open in the Designer for MCP tools to function

Companion app connectivity

Keep the companion app open: The MCP Companion App must remain open in the Webflow Designer for Designer API tools to function. Close the app, and you’ll lose access to canvas-based operations.

Getting started

To use the new Designer API features:

1. Update your MCP configuration following the installation guide
2. Authorize your sites through the OAuth flow (the companion app installs automatically)
3. Open the Designer and launch the “Webflow MCP Companion App” from the Apps panel
4. Start designing with AI-powered prompts like “Create a hero section with responsive design”

Important requirements

Node.js version 22.3.0+

The MCP server now requires Node.js version 22.3.0 or higher. If you’re using an older version:

• Use nvm to install and switch to Node.js 22.3.0
• Clear your npx cache: rm -rf ~/.npm/_npx
• Restart your AI client after updating

See the Node.js compatibility section for detailed troubleshooting steps.

Learn more

For complete setup instructions, tool documentation, and troubleshooting guides, see the MCP server and AI tools documentation.

Manage variable modes on styles

This release adds new API methods to manage variable modes on styles. These methods let you programmatically apply, retrieve, and remove variable modes from styles, enabling better control over design themes and variable management.

New methods for managing variable modes on styles

• Set variable mode
• Set variable modes
• Get variable mode
• Get variable modes
• Remove variable mode
• Remove variable modes
• Remove all variable modes

Try it out

Test these new methods in the API Playground.

Enhanced element creation and form controls

This release streamlines element creation workflows and provides better control over form inputs in the Designer API.

Enhanced bulk element creation

• Set text and style during creation: The element builder now supports setting text and style properties during element creation, eliminating the need for separate API calls after creation. This improves developer experience and performance.

Workspace information in site details

• Access workspace context: The Get Site Information method now includes workspace details:
  • workspaceId - Unique identifier for the workspace
  • workspaceSlug - URL-friendly workspace identifier

Improved form input controls

• Better form customization: New methods provide enhanced control over form inputs:
  • Get input type - Retrieves the HTML type of a FormTextInput field
  • Set input type - Sets the HTML type of a FormTextInput field

Use functions in variables

Variables now support using a set of CSS functions in their values, allowing you to create more flexible and dynamic design tokens.

Webflow supports the following CSS functions in variables:

Custom values

To use functions in variables, you need to create or set them as custom values. All variable creation methods accept a CustomValue object as the value parameter, and the variable.set() method can also update variable values with custom values. For the custom values object, the type property is always "custom" and the value property is a string containing the CSS function.

CustomValue type

1
type CustomValue = {
2
  type: "custom";
3
  value: string;
4
};

1
// Get collection
2
const collection = await webflow.getDefaultVariableCollection()
3
4
// Create a Color Variable
5
const colorVariable = await collection.createColorVariable("blue-500", "#146EF5")
6
7
// Create a Color Variable with a custom value
8
await colorVariable.set({
9
    type: "custom",
10
    value: `color-mix(in srgb, #146EF5, white 75%)`
11
});

Reference variables in functions

When using functions, you can reference other variables using the var() syntax. This allows you to create dynamic relationships between your design tokens. To dynamically get this syntax, use the new getBinding() method on a variable.

1
// Get collection
2
const collection = await webflow.getDefaultVariableCollection()
3
4
// Create a Color Variable
5
const colorVariable = await collection.createColorVariable("blue-500", "#146EF5")
6
7
// Get the binding for the variable
8
const binding = await colorVariable.getBinding()
9
10
// Create a Color Variable with a custom value
11
await colorVariable.set({
12
    type: "custom",
13
    value: `color-mix(in srgb, ${binding}, white 75%)`
14
});

Getting the value of a custom variable

To get the value of a custom variable, add the customValues property as an optional parameter to the variable.get() method.

1
const myValue = await colorVariable.get({
2
    customValues: true
3
})
4
5
console.log(myValue)
6
// Returns a CustomValue object
7
// {
8
//     type: "custom",
9
//     value: "color-mix(in srgb, #146EF5, white 75%)"
10
// }

Support for combo classes

The Designer API now supports the creation of combo classes. Combo classes are a way to override the styles of an existing parent class. This is useful for creating unique variations of a style without having to create an entirely new class.

In the Designer API, you can now create combo classes using the createStyle method and passing an existing style to the parent property. For example, if you have a parent class called button and you want to create a new style that applies a different color for a specific button, you can do the following:

1
// Create a style for the button
2
const buttonStyle = await webflow.createStyle('button')
3
4
// Add properties to the style
5
await buttonStyle.setProperties({
6
  "background-color": "grey",
7
  "font-size": "16px",
8
  "font-weight": "bold",
9
});
10
11
// Create a combo class that applies the new style to the button
12
const comboClass = await webflow.createStyle('button-primary', {parent: 'button'})
13
14
// Add properties to the combo class
15
await comboClass.setProperties({
16
  "background-color": "blue",
17
});
18
19
// Check if the class is a combo class
20
const isComboClass = await comboClass.isComboClass()

Form and asset methods

Additionally, the Designer API now supports the following methods for forms and assets:

Forms

• Get name for a form input element
• Set name for a form input element

Assets

• Replace asset
• Set asset name

Control form settings and fields

We’ve added new methods to manage form settings using the Designer API. This means you can now create forms using the element creation methods with the FormForm element preset. Once the form is created, or if you already have a form created, you can use the new methods to manage the following settings:

• Name: the name of the form
• Redirect URL: the URL to redirect to after the form is submitted
• Action: the URL to send the form data to
• Method: the HTTP method to use when sending the form data

Form settings

• Get form settings
• Set form settings

Form fields

Additionally, you can manage required fields on forms.

• Get “required” status of a form input
• Set “required” status of a form input