> This page is for Home.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Updates to components and elements API

> Updates to the Designer components and elements API

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

* [`webflow.registerComponent()`](/designer/reference/create-component-definition): You can now create a component without passing a root element (Beta)
* [`webflow.getComponent(id)`](/designer/reference/get-component-by-id): This new function returns a component by its ID (Beta)
* [`component.getInstanceCount()`](/designer/reference/get-component-instance-count): 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)`](/designer/reference/insert-element-before)
* [`element.after(newElement)`](/designer/reference/insert-element-after)
* [`element.prepend(newElement)`](/designer/reference/prepend)
* [`element.append(newElement)`](/designer/reference/append)

> **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:

```typescript
// 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](/designer/reference/create-component-definition).

## 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:

```typescript
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](/designer/reference/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:

```typescript
// 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](/designer/reference/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:

```typescript
// 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:

* [Insert element before target element](/designer/reference/insert-element-before)
* [Insert element after target element](/designer/reference/insert-element-after)
* [Nest element as first child](/designer/reference/prepend)
* [Nest element as last child](/designer/reference/append)