Webflow Designer API: Get all components

`webflow.getAllComponents()`

Retrieves all component objects registered to the site.

Syntax

1 webflow.getAllComponents(): Promise<Array<Component>>

Returns

Promise<Array<Component>>

A Promise that resolves to an array of components.

Example

1 // Get all components
2 const components = await webflow.getAllComponents();
3 
4 // Print Component Details
5 if (components.length > 0) {
6 
7   console.log("List of registered components:");
8 
9   for (let component in components) {
10     const currentComponentName = await components[component].getName();
11     console.log(`${component + 1}. Component Name: ${currentComponentName}, Component ID: ${components[component].id}`);
12   }
13 } else {
14   console.log("No components are currently registered.");
15 }

Try this example

Designer Ability

Checks for authorization only

Designer Ability	Permission	Locale	Branch	Workflow	Sitemode
canAccessCanvas	any	any	any	any	any

1	// Get all components
2	const components = await webflow.getAllComponents();
3
4	// Print Component Details
5	if (components.length > 0) {
6
7	console.log("List of registered components:");
8
9	for (let component in components) {
10	const currentComponentName = await components[component].getName();
11	console.log(`${component + 1}. Component Name: ${currentComponentName}, Component ID: ${components[component].id}`);
12	}
13	} else {
14	console.log("No components are currently registered.");
15	}