Webflow Designer API: Create a component

`webflow.registerComponent(name, root)`

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

Syntax

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

Parameters

name : string - The name of the component.
root : AnyElement - The root element of 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 }
13 
14 },~

Designer Ability

Designer Ability	Permission	Locale	Branch	Workflow	Sitemode
canCreateComponents	create siteSymbol	Primary	any	Canvas	any

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	}
13
14	},~