Creating & Retrieving Elements (Designer API v2)

Managing elements is a core aspect of working with the Webflow Designer API. This section covers methods for creating new elements, selecting existing ones, and managing their placement in the element hierarchy.

Element selection

Before manipulating elements on the canvas, you typically need to select them. The Designer API provides methods to get references to existing elements:

1 // Get the currently selected element
2 const selectedElement = await webflow.getSelectedElement();
3 
4 // Get all elements on the page
5 const allElements = await webflow.getAllElements();
6 
7 // Programmatically select an element
8 await webflow.setSelectedElement(elementToSelect);
9 
10 // Get element children and select the first child
11 if (selectedElement?.children) {
12   const children = await selectedElement.children;
13   await webflow.setSelectedElement(children[0]);
14 }

Adding elements to the Canvas

When adding elements to your design, you need to consider their placement within the element hierarchy. The Designer API provides several methods for inserting elements precisely where you need them.

Element Presets

The Designer API uses Element Presets to specify which type of element to create. Each preset corresponds to a unique element type in Webflow. Some element types include their own properties and methods.

For a complete list of available presets, refer to the Element Presets documentation. These presets can be used with any of the element creation methods shown below.

Inserting elements next to existing elements

To position an element alongside existing elements:

1 // Get Selected Element
2 const selectedElement = await webflow.getSelectedElement();
3 
4 if (selectedElement) {           
5   // Insert a div after the selected element
6   const newDivAfter = await selectedElement.after(webflow.elementPresets.DivBlock);
7   
8   // Insert a div before the selected element
9   const newDivBefore = await selectedElement.before(webflow.elementPresets.DivBlock);
10 }

Parent elements

If the selected element has a parent element, the new element created using before() or after() will also be a child element of the same parent.

Nesting elements within parent elements

To create parent-child relationships by nesting elements:

1 // Get Selected Element
2 const parentElement = await webflow.getSelectedElement();
3 
4 // Check if element supports child elements
5 if (parentElement?.children) {
6   // Add element as first child (prepend)
7   const firstChild = await parentElement.prepend(webflow.elementPresets.DivBlock);
8   
9   // Add element as last child (append)
10   const lastChild = await parentElement.append(webflow.elementPresets.Paragraph);
11 }

Bulk adding elements

For more complex structures, you can create multiple elements at once using element builder:

1 // Create an element structure using elementBuilder
2 const selectedElement = await webflow.getSelectedElement();
3 
4 // Create a section element as the root
5 const section = webflow.elementBuilder(webflow.elementPresets.DOM);
6 section.setTag('section');
7 
8 // Add a container child element
9 const container = section.append(webflow.elementPresets.DOM);
10 container.setTag('div');
11 container.setAttribute('class', 'container');
12 
13 // Add heading and paragraph to the container
14 const heading = container.append(webflow.elementPresets.DOM);
15 heading.setTag('h2');
16 
17 const paragraph = container.append(webflow.elementPresets.DOM);
18 paragraph.setTag('p');
19 
20 // Add the entire structure to the canvas in one operation
21 if (selectedElement?.children) {
22   await selectedElement.append(section);
23   
24   // After adding to canvas, find elements and set text content
25   const elements = await webflow.getAllElements();
26   
27   // Find the heading and paragraph elements by their IDs
28   const headingEl = elements.find(el => el.id.element === heading.id);
29   const paragraphEl = elements.find(el => el.id.element === paragraph.id);
30   
31   // Set text content on the elements
32   if (headingEl) await headingEl.setTextContent('Hello World');
33   if (paragraphEl) await paragraphEl.setTextContent('Created with element builder');
34 }

Removing elements

To remove an element from the canvas:

1 // Get Selected Element
2 const elementToRemove = await webflow.getSelectedElement();
3 
4 if (elementToRemove) {
5   // Remove the element
6   await elementToRemove.remove();
7 }

Methods

The Elements API offers the following methods for element creation and manipulation:

Get selected element

Retrieve the currently selected element in the Designer.

Set selected element

Programmatically select an element in the Designer.

Get all elements

Retrieve all elements on the current page.

Insert element before

Insert a new element before the target element.

Insert element after

Insert a new element after the target element.

Prepend

Insert a new element as the first child of the target element.

Append

Insert a new element as the last child of the target element.

Bulk add elements

Add multiple elements at once with a hierarchical structure.

Remove element

Remove an element from the canvas.

1	// Get the currently selected element
2	const selectedElement = await webflow.getSelectedElement();
3
4	// Get all elements on the page
5	const allElements = await webflow.getAllElements();
6
7	// Programmatically select an element
8	await webflow.setSelectedElement(elementToSelect);
9
10	// Get element children and select the first child
11	if (selectedElement?.children) {
12	const children = await selectedElement.children;
13	await webflow.setSelectedElement(children[0]);
14	}

1	// Get Selected Element
2	const selectedElement = await webflow.getSelectedElement();
3
4	if (selectedElement) {
5	// Insert a div after the selected element
6	const newDivAfter = await selectedElement.after(webflow.elementPresets.DivBlock);
7
8	// Insert a div before the selected element
9	const newDivBefore = await selectedElement.before(webflow.elementPresets.DivBlock);
10	}

1	// Get Selected Element
2	const parentElement = await webflow.getSelectedElement();
3
4	// Check if element supports child elements
5	if (parentElement?.children) {
6	// Add element as first child (prepend)
7	const firstChild = await parentElement.prepend(webflow.elementPresets.DivBlock);
8
9	// Add element as last child (append)
10	const lastChild = await parentElement.append(webflow.elementPresets.Paragraph);
11	}

1	// Create an element structure using elementBuilder
2	const selectedElement = await webflow.getSelectedElement();
3
4	// Create a section element as the root
5	const section = webflow.elementBuilder(webflow.elementPresets.DOM);
6	section.setTag('section');
7
8	// Add a container child element
9	const container = section.append(webflow.elementPresets.DOM);
10	container.setTag('div');
11	container.setAttribute('class', 'container');
12
13	// Add heading and paragraph to the container
14	const heading = container.append(webflow.elementPresets.DOM);
15	heading.setTag('h2');
16
17	const paragraph = container.append(webflow.elementPresets.DOM);
18	paragraph.setTag('p');
19
20	// Add the entire structure to the canvas in one operation
21	if (selectedElement?.children) {
22	await selectedElement.append(section);
23
24	// After adding to canvas, find elements and set text content
25	const elements = await webflow.getAllElements();
26
27	// Find the heading and paragraph elements by their IDs
28	const headingEl = elements.find(el => el.id.element === heading.id);
29	const paragraphEl = elements.find(el => el.id.element === paragraph.id);
30
31	// Set text content on the elements
32	if (headingEl) await headingEl.setTextContent('Hello World');
33	if (paragraphEl) await paragraphEl.setTextContent('Created with element builder');
34	}

1	// Get Selected Element
2	const elementToRemove = await webflow.getSelectedElement();
3
4	if (elementToRemove) {
5	// Remove the element
6	await elementToRemove.remove();
7	}