Create a component

webflow.registerComponent(options)

webflow.registerComponent(options, root)

webflow.registerComponent(options, source)

webflow.registerComponent(name, root)

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

• 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)

• To convert an existing element into a component, by default replacing the element with the new component, pass the options for the new component and the element to turn into a component. (Beta)

• To duplicate an existing component, pass the options for the new component and component to duplicate. (Beta)

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

Syntax

Component options:

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
  /** Whether to replace the existing element (optional) */
9
  replace?: boolean;
10
}

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

1
webflow.registerComponent(
2
  options: ComponentOptions
3
): Promise<Component>

Convert an existing element into a component, by default replacing the element with the new component (Beta):

1
webflow.registerComponent(
2
  options: ComponentOptions,
3
  root: AnyElement | BuilderElement | ElementPreset<AnyElement>,
4
): Promise<Component>

Duplicate a component (Beta):

1
webflow.registerComponent(
2
  options: ComponentOptions,
3
  source: Component | ComponentId,
4
): Promise<Component>

Create a component in an existing root element (Deprecated):

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

Parameters

• options: An object with these properties:

  • 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.
  • replace : boolean - (optional) Whether to replace the existing canvas element with the new component. This parameter applies only when root is a canvas AnyElement. The default is true when root is a canvas element. Passing replace: true when root is an ElementPreset or BuilderElement throws InvalidRequest.

• root : AnyElement | ElementPreset<AnyElement> | BuilderElement - The source element to convert into a component, which can be an existing element, an element preset, or a builder element.

• source : Component | ComponentId - The component or component ID to duplicate.

If you omit the second parameter, the function creates a blank Block-based component.

Returns

Promise< Component>

A Promise that resolves to the registered component.

Examples

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

1
// Convert an existing element into a component and replace the element with the component
2
const selectedElement = await webflow.getSelectedElement()
3
if (selectedElement) {
4
  const heroComponent = await webflow.registerComponent(
5
    {
6
      name: 'Hero Section',
7
      group: 'Sections',
8
      description: 'Main hero with heading and CTA'
9
    },
10
    selectedElement
11
  )
12
}

1
// Duplicate a component
2
const [original] = await webflow.getAllComponents()
3
const copy = await webflow.registerComponent({ name: 'Card Copy' }, original)

Designer Ability