New component methods

These new functions are now available in the Designer API (Beta):

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

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: