Create a component

webflow.registerComponent(name, root)

webflow.registerComponent(options)

Registers a new component definition with the specified name and root element or the specified options.

• To create a component definition and insert it within an existing element, pass the name for the new component and the root element.

• To create a component that is not inside any element, pass an object with the name for the new component and optionally a group and description. (Beta)

Syntax

Create a component in an existing root element:

1
webflow.registerComponent(
2
  name: string,
3
  root: AnyElement | ElementPreset<AnyElement> | Component
4
): Promise<Component>

Create a component that is not inserted onto the page (Beta):

1
interface ComponentOptions {
2
  /** The name of the component (required) */
3
  name: string;
4
  /** The group/folder to place the component in (optional) */
5
  group?: string;
6
  /** A description for the component (optional) */
7
  description?: string;
8
}
9
10
webflow.registerComponent(
11
  options: ComponentOptions
12
): Promise<Component>

Parameters

Creating within a root element:

• name : string - The name of the component, which must not be empty and must be unique.
• root : AnyElement - The root element of the component.

Creating outside of a root element:

• options: object - An object with these options:

  • name : string - The name of the component, which must not be empty and must be unique.
  • group : string - (optional) The group/folder to place the component in.
  • description : string - (optional) A description for the component.

Returns

Promise< Component>

A Promise that resolves to the registered component.

Example

1
// Get selected element
2
const rootElement = await webflow.getSelectedElement();
3
4
if (rootElement) {
5
6
  // Create a component from the Root Element
7
  const component = await webflow.registerComponent('MyCustomComponent', rootElement);
8
  console.log(`Component registered with ID: ${component.id}`);
9
10
} else {
11
  console.log("No element is currently selected. Please select a root element first.");
12
}

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
});

Designer Ability