Changelog

Support for Components & Variables

We’re excited to announce the expansion of Webflow’s Designer API with comprehensive support for Components and Variables. This release introduces a suite of new endpoints that empower developers to implement component-based architecture and manage design systems through variable collections. These capabilities enable programmatic creation, modification, and management of components, alongside the ability to define and control design tokens such as colors, typography, and spacing variables.

Feature highlights

• Component creation and management - Create, register, and manipulate components programmatically
• Variable collections - Work with design variables to maintain consistency across your projects
• Component navigation - Enter and exit component instances during development

New endpoints

Element methods

• webflow.getRootElement()
  Access the root element of the current context, enabling traversal of the element tree.

Component methods

• webflow.getAllComponents()
  Retrieve all components available in the current project.

• webflow.registerComponent(name, element)
  Register a new component with the specified name and root element.

• webflow.unregisterComponent(component)
  Remove a component from the registry.

• webflow.enterComponent(instance)
  Enter a component instance to make edits to its structure.

• webflow.exitComponent()
  Exit the current component context.

• webflow.createInstance(component)
  Create a new instance of a component.

• component.getName()
  Get the name of a component.

• component.setName(name)
  Change the name of a component.

Variables and collections

• webflow.getDefaultVariableCollection()
  Access the default variable collection for the current project.

• collection.getName()
  Get the name of a variable collection.

• collection.getVariable(id)
  Retrieve a variable by its unique identifier.

• collection.getVariableByName(name)
  Retrieve a variable by its name.

• collection.getAllVariables()
  Get all variables in a collection.

• variable.getName()
  Get the name of a variable.

• variable.setName(newName)
  Change the name of a variable.

• variable.set(value)
  Set the value of a variable.

• variable.get()
  Get the current value of a variable.

• variable.remove()
  Remove a variable from its collection.