Changelog

March 16, 2026

Updates to components and elements API

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

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

Beta

These methods are in public beta and may change with future releases.

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:

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

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:

const componentId = '4a669354-353a-97eb-795c-4471b406e043';
const component = await webflow.getComponent(componentId);
console.log(component.id); // '4a669354-353a-97eb-795c-4471b406e043'
const componentName = await component.getName();
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:

// Audit component usage across the site
const components = await webflow.getAllComponents();
for (const component of components) {
  const name = await component.getName();
  const count = await component.getInstanceCount();
  console.log(`${name}: ${count} instances`);
}
// Guard against removing a component that's still in use
const hero = components[0];
const instanceCount = await hero.getInstanceCount();
if (instanceCount > 0) {
  console.log(`Cannot safely remove — ${instanceCount} instances exist`);
} else {
  await webflow.unregisterComponent(hero);
}

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:

// Get Selected Element
const selectedElement = await webflow.getSelectedElement();
if (selectedElement) {
  // Insert DIV after selected Element
  const newDiv = await selectedElement.after('div');
  // Print element details
  console.log(`${JSON.stringify(newDiv)}`);
}

For more information, see: