For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Resources
Get started
ReferenceGuidesExamplesChangelog
ReferenceGuidesExamplesChangelog
  • Designer API
    • Introduction
    • Getting Started
    • Webflow CLI
    • Error Handling
    • App Modes
  • Elements
    • Creating & Retrieving Elements
      • Get selected element
      • Set selected element
      • Get element children
      • Get the parent component
      • Get all elements
      • Insert element before target element
      • Insert element after target element
      • Nest element as first child
      • Nest element as last child
      • Bulk Add Elements
      • Remove element
    • Element Properties & Methods
    • Element Types & Methods
  • Styles
    • Managing Style Properties
    • Managing Variable Modes
  • Components
  • Variables & Collections
    • Variable Collections
    • Variables
    • Variable Modes
  • Assets
  • Pages & Folders
  • Utilities
    • User Events & Notifications
    • App Intents & Connections
  • Additional Resources
    • API Playground
    • FAQs
LogoLogo
Resources
Get started
On this page
  • Element selection
  • Adding elements to the Canvas
  • Element presets
  • Inserting elements next to existing elements
  • Nesting elements within parent elements
  • Bulk adding elements
  • Removing elements
  • Methods
Elements

Creating & Retrieving Elements

Was this page helpful?
Built with

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.

Your browser doesn’t support HTML video.

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
2const selectedElement = await webflow.getSelectedElement();
3
4// Get all elements on the page
5const allElements = await webflow.getAllElements();
6
7// Programmatically select an element
8await webflow.setSelectedElement(elementToSelect);
9
10// Get element children and select the first child
11if (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. Including:

MethodDescription
before()Insert a new element before the target 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.
elementBuilder()Add multiple elements at once with a hierarchical structure.

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.

Use custom DOM elements when presets aren't available

Not all element types are supported through presets. If a preset isn’t available for the element you want to create, you can use the custom DOM element method to create a custom element.

Inserting elements next to existing elements

To position an element alongside existing elements:

1// Get Selected Element
2const selectedElement = await webflow.getSelectedElement();
3
4if (selectedElement) {
5  // Insert a div after the selected element
6  const newDivAfter = await selectedElement.after(
7    'div'
8  );
9
10  // Insert a div before the selected element
11  const newDivBefore = await selectedElement.before(
12    'div'
13  );
14}
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
2const parentElement = await webflow.getSelectedElement();
3
4// Check if element supports child elements
5if (parentElement?.children) {
6  // Add element as first child (prepend)
7  const firstChild = await parentElement.prepend(
8    'div'
9  );
10
11  // Add element as last child (append)
12  const lastChild = await parentElement.append(
13    'p'
14  );
15}

Bulk adding elements

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

1// Create an element structure using elementBuilder
2const selectedElement = await webflow.getSelectedElement();
3
4// Create a section element as the root
5const section = webflow.elementBuilder(webflow.elementPresets.DOM);
6section.setTag("section");
7
8// Add a container child element
9const container = section.append(webflow.elementPresets.DOM);
10container.setTag("div");
11container.setAttribute("class", "container");
12
13// Add heading and paragraph to the container
14const heading = container.append(webflow.elementPresets.DOM);
15heading.setTag("h2");
16
17const paragraph = container.append(webflow.elementPresets.DOM);
18paragraph.setTag("p");
19
20// Add the entire structure to the canvas in one operation
21if (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)
34    await paragraphEl.setTextContent("Created with element builder");
35}

Removing elements

To remove an element from the canvas:

1// Get Selected Element
2const elementToRemove = await webflow.getSelectedElement();
3
4if (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.