Webflow Designer API: Get the selected component (Beta)

`webflow.getCurrentComponent()`

Retrieves the component that is currently being edited.

Beta

These methods are in public beta and may change with future releases.

Syntax

1 webflow.getCurrentComponent(): Promise<Component | null>

Returns

Promise<Component>

A Promise that resolves to a component or null if no component is currently being edited.

Example

1 const component = await webflow.getCurrentComponent();
2 if (component) {
3   const name = await component.getName();
4   console.log(`Currently editing component: ${name}`);
5   // Example: get all elements inside the active component
6   const root = await component.getRootElement();
7   const children = await root.getChildren();
8   console.log(`Root has ${children.length} child element(s)`);
9 } else {
10   console.log('Not currently editing a component.');
11 }

Try this example

Designer Ability

Checks for authorization only

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

1	const component = await webflow.getCurrentComponent();
2	if (component) {
3	const name = await component.getName();
4	console.log(`Currently editing component: ${name}`);
5	// Example: get all elements inside the active component
6	const root = await component.getRootElement();
7	const children = await root.getChildren();
8	console.log(`Root has ${children.length} child element(s)`);
9	} else {
10	console.log('Not currently editing a component.');
11	}