Unlink Component (Beta)

element.unlinkComponent()

Converts a component instance into a plain element tree, detaching it from its component definition.

After unlinking, the returned element is no longer a ComponentInstance — it is a regular element with the same visual structure. Changes to the original component definition will no longer affect it.

This action is undoable via the Designer’s undo stack.

Syntax

1
element.unlinkComponent(): Promise<AnyElement>

Returns

Promise<AnyElement>

A Promise that resolves to the root element of the detached element tree.

Example

1
const elements = await webflow.getAllElements();
2
const componentInstance = elements.find(el => el.type === 'ComponentInstance');
3
4
if (componentInstance?.type === 'ComponentInstance') {
5
  const unlinkedRoot = await componentInstance.unlinkComponent();
6
  console.log('Unlinked element type:', unlinkedRoot.type);
7
  // The element is now a regular element, no longer a ComponentInstance
8
}

Designer Ability