Changelog

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

Support for variable modes and form elements

Support for variable modes

Variable modes let you define multiple values for individual variables, creating distinct sets of values (“modes”) that can be switched and applied across a site.

Use the following endpoints to create and manage variable modes:

• Create variable mode
• Get all variable modes
• Get variable mode by ID
• Get variable mode by name
• Remove variable mode
• Get variable mode name
• Set variable mode name

Get and set variable values for a specific mode:

• Set mode-specific variable value
  You can now include an option parameter to set a mode-specific variable value.
• Get mode-specific variable value
  You can now include an option parameter to get a mode-specific variable value.

Managing forms

Webflow’s Designer API now supports the following methods for Form elements:

• Get form name
• Set form name

Work with pseudo-states in the Designer

Get the current pseudo-state of the designer and subscribe to changes in the pseudo-state. This is helpful for showing specific style properties based on a pseudo-state like :hover, :focus, or :active.

• Get the pseudo-state of the designer
  Added the webflow.getPseudoMode() method to return the pseudo-class state of the designer.
• Subscribe to pseudo-state changes
  Added options to the webflow.subscribe() method to subscribe to changes in the pseudo-state of the designer.

Get additional site details

• Get site information
  The getSiteInfo method now returns the domains object in the response.

Create and manage variable collections

Variable collections provide an organizational structure for managing related variables. Collections allow you to group variables logically - for example, you might create separate collections for brand colors, typography, or spacing variables. Collections help maintain a clean and organized variable system, making it easier to manage design tokens at scale across your projects.

Use the following endpoints to create and manage variable collections.

• Create variable collection
• Get all variable collections
• Get default variable collection
• Get variable collection by ID
• Remove variable collection
• Set variable collection name

Enhanced page methods

Page methods for the designer API now accept null values. The following methods now accept null values:

• setTitle
• setDescription
• setOpenGraphTitle
• setOpenGraphDescription
• setOpenGraphImage
• setSearchTitle
• setSearchDescription
• setSearchImage

Enhanced extension management and variable types

In this release, the Designer API introduces key enhancements to improve extension lifecycle management and expand the types of variables available in the Designer.

Extension management

Programmatically close extensions and access contextual launch information

• webflow.closeExtension()
  Close the current extension. This enables more control over the extension lifecycle and user experience flows.

• webflow.getLaunchContext()
  Retrieve initialization context information when an extension is launched. This method provides critical data about how the extension was activated, whether through an App Intent, App Connection, or deep link.

Variable system enhancements

Create and manage percentage and number variables for more flexible design systems

• webflow.createPercentageVariable(options)
  Create percentage-based variables for responsive design values such as opacity levels, width/height constraints, or other proportional measurements.

• webflow.createNumberVariable(options)
  Create numeric variables for values that require precise control without measurement units, such as animation iterations, z-index values, or quantity indicators.

Deep linking to Hybrid Apps

This release introduces deep linking support for Hybrid Apps, enabling smooth transitions between third-party platforms and the Webflow Designer. Learn more about deep linking in the Hybrid Apps documentation.

Feature highlights

• Direct access to Hybrid Apps - Launch your app directly in the Designer after authenticating with Webflow
• Streamlined user experience - Eliminate manual navigation steps between platforms
• Enhanced workflow efficiency - Create seamless onboarding and integration flows

Deep linking format

Deep linking requires the Site Short Name and Client ID.

• Get the Site Short Name: Retrieve the short name using the Get Site endpoint.
• Add Client ID: Find the Client ID in the Webflow Dashboard under Apps & Integrations in your App’s settings.

<site short name>.design.webflow.com?app=<client id>

Subscribe to mode changes in the Designer

Designer Extensions now remain active across various modes in the Designer, including preview mode, across different locales, and on branched pages. Different capabilities are available depending on the mode, so it’s important to know when a mode changes. This update introduces a new event subscription method to help you track mode changes in the Designer.

• Subscribe to mode changes in the Designer
  Receive real-time notifications when users switch between different Designer modes. Since each mode offers distinct capabilities based on user permissions, this subscription helps your app adapt its functionality accordingly. For detailed information about available modes and their capabilities, refer to the App Modes documentation.

Subscribe to CMS collection page changes

The Designer API now includes a new event subscription method for CMS collection pages:

• Subscribe to CMS Collection Page Events
  Track when users interact with CMS collection pages and items. This event triggers in two scenarios:
  • When a user navigates to a collection page
  • When a user selects a different CMS item within a collection page