Changelog

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