Changelog

Updates to components API

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

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

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.