These new functions are now available in the Designer API:

• webflow.getCurrentComponent(): Get the component that is currently being edited (Beta)
• element.getParentComponent(): Get the component that contains a given element (Beta)
• component.getSettings(): Get the name, group, and description of a component (Beta)
• component.setSettings(): Update one or more settings on a component (Beta)

Getting the selected component

You can now retrieve the component that is currently being edited with the new webflow.getCurrentComponent() function (Beta). If no component is being edited, the method returns null.

1
const component = await webflow.getCurrentComponent();
2
if (component) {
3
  const name = await component.getName();
4
  console.log(`Currently editing component: ${name}`);
5
  // Example: get all elements inside the active component
6
  const root = await component.getRootElement();
7
  const children = await root.getChildren();
8
  console.log(`Root has ${children.length} child element(s)`);
9
} else {
10
  console.log('Not currently editing a component.');
11
}

For more information, see Get the selected component.

Getting an element’s parent component

You can now retrieve the component that directly contains a given element with the new element.getParentComponent() function (Beta). If the element is not inside a component, the method returns null.

1
const element = await webflow.getSelectedElement();
2
if (element) {
3
  const parentComponent = await element.getParentComponent();
4
  if (parentComponent) {
5
    const name = await parentComponent.getName();
6
    console.log(`Element is inside component: ${name}`);
7
  } else {
8
    console.log('Element is not inside a component.');
9
  }
10
}

For more information, see Get the parent component.

Getting and setting component settings

The new component.getSettings() and component.setSettings() functions let you read and update a component’s name, group, and description in a single call:

1
const components = await webflow.getAllComponents();
2
const component = components[0];
3
4
// Read all settings at once
5
const settings = await component.getSettings();
6
console.log(settings.name);        // 'Hero Section'
7
console.log(settings.group);       // 'Sections'
8
console.log(settings.description); // 'A reusable hero with heading and CTA'
9
10
// Update only the description
11
await component.setSettings({
12
  description: 'Updated hero layout with video background',
13
});
14
15
// Update all settings at once
16
await component.setSettings({
17
  name: 'Hero Section v2',
18
  group: 'Sections',
19
  description: 'Redesigned hero component',
20
});

For more information, see:

• Get component settings
• Set component settings

You can now use the webflow.searchComponents(options) method (Beta) to search for Components by name or description. If you don’t provide a search parameter, the method returns all Components. If you provide a string search parameter as in the following example, the method returns Components with matching names or descriptions.

1
// Get all Components
2
const allComponents = await webflow.searchComponents();
3
/*
4
[
5
  {
6
    id: 'xxxx',
7
    name: 'Hero section',
8
    group: 'Sections',
9
    description: 'Lorem ipsum',
10
    instances: 3,
11
    canEdit: true,
12
    library: null,
13
  },
14
  {
15
    id: 'yyyy',
16
    name: 'Nav Bar',
17
    group: 'Navigation',
18
    description: '',
19
    instances: 5,
20
    canEdit: false,
21
    library: { name: 'Core Library', id: 'lib_123' },
22
  },
23
]
24
*/
25
26
// Search for Components by query
27
const heroes = await webflow.searchComponents({ q: 'Hero' });
28
/*
29
[
30
  {
31
    id: 'xxxx',
32
    name: 'Hero section',
33
    group: 'Sections',
34
    description: 'Lorem ipsum',
35
    instances: 3,
36
    canEdit: true,
37
    library: null,
38
  },
39
]
40
*/

For more information, see Search for Components.

You can now programmatically open a Component’s canvas or navigate to a page with the new webflow.openCanvas() method (Beta).

1
// Open a component canvas by ID
2
await webflow.openCanvas({ componentId: 'component-id' });
3
4
// Open a component canvas by reference
5
const components = await webflow.getAllComponents();
6
await webflow.openCanvas(components[0]);
7
8
// Navigate to a page by ID
9
await webflow.openCanvas({ pageId: 'page-id' });

Previously, Designer Extensions and MCP agents that needed to modify a Component’s internal structure had to rely on the user manually navigating to the component canvas. The openCanvas() method removes that manual step and enables fully automated Component workflows.

openCanvas() accepts a Component ID, a Component reference, or a ComponentElement (instance) reference to open the component canvas. It also accepts a page ID or Page reference to navigate to a page — equivalent to calling webflow.switchPage().

For more information, see Open a canvas.

These new and updated functions are now available in the Designer API:

• webflow.getComponentByName(name): Get a component by its name and optionally its group (Beta)
• component.getVariants(): Get all variants of a component (Beta)
• component.getSelectedVariant(): Get all variants of a component (Beta)

Retrieving a component by name

You can now retrieve a component by its name and optionally its group with the new webflow.getComponentByName() function (Beta):

1
// Fetch a component by name only
2
const heroSection = await webflow.getComponentByName('Hero');
3
console.log(heroSection.id);
4
5
// Fetch a component scoped to a group
6
const marketingHero = await webflow.getComponentByName('Marketing', 'Hero');
7
console.log(marketingHero.id);

For more information, see Get component by name (Beta).

Getting component variants

The new functions component.getVariants() and component.getSelectedVariant() get the variants of a component and the selected variant of a component, as in these examples:

1
const component = (await webflow.getAllComponents())[0];
2
const variants = await component.getVariants();
3
console.log(variants);
4
// [
5
//   { id: 'base', name: 'Primary', isSelected: true },
6
//   { id: 'xxxx', name: 'Secondary', isSelected: false },
7
// ]
8
// Find which variant the user is currently editing
9
const activeVariant = variants.find(v => v.isSelected);
10
console.log(`Currently editing: ${activeVariant?.name}`);

1
const selectedVariant = await heroComponent.getSelectedVariant();
2
/*
3
{
4
  id: 'variant-123',
5
  name: 'Secondary Hero',
6
  isSelected: true,
7
}
8
*/
9
// When no variant is explicitly selected, returns base
10
const base = await heroComponent.getSelectedVariant();
11
/*
12
{
13
  id: 'base',
14
  name: 'Primary',
15
  isSelected: true,
16
}
17
*/

For more information, see:

• Get all variants of a component: Get all variants of a component
• Get selected variant: Get all variants of a component

These new and updated functions are now available in the Designer API:

• webflow.registerComponent(): You can now create a component without passing a root element (Beta)
• webflow.getComponent(id): This new function returns a component by its ID (Beta)
• component.getInstanceCount(): This new function gets the total number of (Beta)instances of a component across an entire site

Also, these functions are updated to accept a tag name such as div, h2, or section instead of only a component or element preset:

• element.before(newElement)
• element.after(newElement)
• element.prepend(newElement)
• element.append(newElement)

Creating functions without passing a root element

You can now create a component with the webflow.registerComponent() function without passing a root element. Instead, you can pass an object with the name for the new component and optionally a group and description, as in this example:

1
// Create a hero component in the Sections group that is not within an existing element
2
const hero = await webflow.registerComponent({
3
  name: 'Hero Section',
4
  group: 'Sections',
5
  description: 'A reusable hero section with heading and CTA',
6
});

For more information, see Create a component.

Getting components by ID

Previously, to access a component in the Designer API, you had to get a list of components with the webflow.getAllComponents() function and filter by ID. Now you can use the webflow.getComponent(id) function to get a component by its ID, as in this example:

1
const componentId = '4a669354-353a-97eb-795c-4471b406e043';
2
const component = await webflow.getComponent(componentId);
3
console.log(component.id); // '4a669354-353a-97eb-795c-4471b406e043'
4
5
const componentName = await component.getName();
6
console.log(componentName); // 'Component Name'

For more information, see Get component by ID.

Getting the number of instances of a component

You can now get the total number of instances of a component across an entire site with the webflow.getInstanceCount() function:

1
// Audit component usage across the site
2
const components = await webflow.getAllComponents();
3
for (const component of components) {
4
  const name = await component.getName();
5
  const count = await component.getInstanceCount();
6
  console.log(`${name}: ${count} instances`);
7
}
8
// Guard against removing a component that's still in use
9
const hero = components[0];
10
const instanceCount = await hero.getInstanceCount();
11
if (instanceCount > 0) {
12
  console.log(`Cannot safely remove — ${instanceCount} instances exist`);
13
} else {
14
  await webflow.unregisterComponent(hero);
15
}

For more information, see Get component instance count.

Inserting elements by tag name

Previously, when you used one of these functions to insert an element, you had to pass a component object or a preset from the webflow.elementPresets object:

• element.before(newElement)
• element.after(newElement)
• element.prepend(newElement)
• element.append(newElement)

Now, you can pass an element to create by the name of the tag, such as div, h2, or section, as in these examples:

1
// Get Selected Element
2
const selectedElement = await webflow.getSelectedElement();
3
4
if (selectedElement) {
5
  // Insert DIV after selected Element
6
  const newDiv = await selectedElement.after('div');
7
8
  // Print element details
9
  console.log(`${JSON.stringify(newDiv)}`);
10
}

For more information, see:

• Insert element before target element
• Insert element after target element
• Nest element as first child
• Nest element as last child

Similar to how it renames exported components and props, DevLink now renames or filters out exported custom attributes to ensure that the exported React code is valid.

• HTML5 standard names such as tabindex and maxlength are capitalized according to React standards, in this example tabIndex and maxLength
• Attributes that have a React equivalent, such as class and for, are converted to the React equivalent, in this example className and htmlFor
• Attributes that match event handler names such as onClick and onMouseOver are filtered out, regardless of case
• Attributes that start with numbers are filtered out
• Attributes that are incomplete, such as data- and aria- are filtered out
• Attributes named with an empty string are filtered out
• Attributes containing invalid characters, such as my-😀-attr, are filtered out
• Any other invalid HTML5 attributes are filtered out

DevLink prints a warning to your CLI console, and adds JSDoc Invalid Attribute comments, when it filters out attributes due to these rules, except when removing attributes with an empty string as their name. For example, this exported code shows a warning about a custom attribute that was filtered out:

1
/**
2
 * ComponentWithInvalidAttributes
3
 *
4
 * @warning
5
 * The component could not be fully exported:
6
 * - Invalid attribute: \`onClick\`
7
 */
8
export function ComponentWithInvalidAttributes() {
9
  return <Builtin.Block tag="div" data-testid="my-block" aria-label="My Block" />;
10
}

For more information, see What DevLink Exports.

You can now update page-level metadata for up to 100 pages in a single request using the new bulk update page metadata endpoint.

Key capabilities

• Batch updates: Update title, slug, seo, and openGraph fields for multiple pages at once.
• Localization support: Target different secondary locales by including a localeId per page entry. The same page ID can appear multiple times with different locales.
• Validation: Duplicate id + localeId combinations return a 400 error. All pages must belong to the same site.

DevLink now renames exported components and props to ensure that the generated React code has valid, collision-free identifiers. Here is a summary of the changes that it makes:

Components

DevLink sanitizes exported component names to handle:

• Emojis and special characters: My 😀 Component → MyComponent
• Numbers at the start: 123 → UnknownComponent123, 1Component → UnknownComponent1Component
• Reserved words: class → UnknownComponentClass
• Empty or whitespace-only names: "" or " " → UnknownComponent
• Collisions: Multiple components named MyComponent → MyComponent, MyComponent2, MyComponent3

Props

DevLink sanitizes exported prop names to handle:

• Emojis and special characters: 😀 → unknownProp
• Numbers at the start: 123 → unknownProp123, 1prop → unknownProp1Prop
• Reserved words: return → returnProp, private → privateProp
• React reserved props: key → keyProp, ref → refProp
• HTML attributes for component props: class → classProp, for → forProp
• Empty or whitespace-only names: "" or " " → unknownProp

Note: HTML attributes like data-* and aria-* are preserved as-is and not sanitized.

What’s Fixed

This update fixes several critical issues in the previous system:

• No more leading underscores: Previously, names starting with numbers like 123 would become _123 or __123, which violates JavaScript naming conventions
• Better handling of reserved words: Component props named class or for now become classProp and forProp instead of _class and _for
• React conflicts resolved: Props named key or ref now become keyProp and refProp to avoid conflicts with React’s special props
• Fallback for invalid names: Empty or whitespace-only names now get meaningful fallback names instead of breaking

For more information, see What DevLink Exports.

Data API bug fix

Previously, when a component prop was bound to a custom attribute, the Data API did not return that content as an override for the component instance as it did for other props. Now, the API returns that override data like other overrides and allows you to update it.

This fix affects these endpoints:

• GET /v2/pages/:page_id/dom
• POST /v2/pages/:page_id/dom
• GET /v2/sites/:site_id/components/:component_id/dom
• POST /v2/sites/:site_id/components/:component_id/dom
• GET /v2/sites/:site_id/components/:component_id/properties
• POST /v2/sites/:site_id/components/:component_id/properties

New workspace_settings audit event

The new workspace_settings event allows auditors to track when AI features are enabled or disabled on a Webflow Workspace. Currently, this event is triggered only when the AI enablement setting changes, not on any other Workspace setting changes.

Here is an example API request that retrieves matching events:

$
curl -G https://api.webflow.com/v2/workspaces/hitchhikers-workspace/audit_logs \
>
     -H "Authorization: Bearer <token>" \
>
     -d limit=100 \
>
     -d offset=0 \
>
     -d eventType=workspace_settings \
>
     --data-urlencode from=2025-06-22T16:00:31Z \
>
     --data-urlencode to=2025-07-22T16:00:31Z

Here is an example response:

1
{
2
  "eventSubType": "setting_updated",
3
  "eventType": "workspace_setting",
4
  "timestamp": "2026-03-03T08:07:18.358Z",
5
  "actor": {
6
    "id": "62c730cfe7412b1cf86caa4d",
7
    "email": "alena.messmer@webflow.com"
8
  },
9
  "workspace": {
10
    "id": "685c583b3b9dd5e04b2f82d3",
11
    "slug": "cms-fga"
12
  },
13
  "payload": {
14
    "setting": "ai_toggle",
15
    "previousValue": "false",
16
    "value": "true",
17
    "method": "dashboard"
18
  }
19
}