ElementsCreating & Retrieving Elements

Bulk Add Elements

webflow.elementBuilder(preset)

Construct complex element structures before adding them to a page. This method is optimized for bulk creation of elements, and is particularly useful when working with SVG graphics or nested element groups like a navigation menu. This approach is more efficient than creating and adding elements one at a time, especially for complex designs.

Current Limitations

Currently, only DOM elements can be created with the element builder.

Syntax

1webflow.elementBuilder(elementPreset: webflow.elementPresets.DOM): BuilderElement

Parameters

  • preset: The DOM element preset from the Webflow presets. Currently, only DOM elements are supported.

Returns

BuilderElement

A builder element object designed for creating and manipulating hierarchical structures. This object has these methods:

  • append(): Add a child element to this builder element
  • setTag(): Set the HTML tag for this DOM element
  • setAttribute(): Set an attribute on this DOM element
  • setTextContent(): Set the text within this DOM element
  • setStyles(): Set styles on this DOM element

How to use the element builder

1

Get the parent element
Use webflow.getSelectedElement() to select the parent element. This is where your new structure will be added.

2

Create a builder element
Use webflow.elementBuilder(webflow.elementPresets.DOM) to create a builder element.

3

Configure the builder element
Use the builder element to configure the tags, attributes, and styles of the new structure.

4

Add child elements
Use append() to add child elements to the builder element. Configure them with tags, attributes, and styles.

5

Add the complete structure to your page
Use append() on the parent element to add the complete structure to your page.

Examples

This example shows how to use element builder to create a navigation menu:

1async function createNavMenu() {
2  // Start by creating some styles that will be applied to the nav container. 
3  const navStyle = await webflow.createStyle('navContainer');
4  await navStyle.setProperties({
5    'display': 'flex',
6    'row-gap': '20px',
7    'padding-left': '15px',
8    'padding-right': '15px',
9    'padding-top': '15px',
10    'padding-bottom': '15px',
11    'background-color': '#f5f5f5',
12    'border-radius': '8px'
13  });
14    
15  const navItemStyle = await webflow.createStyle('navItem');
16  await navItemStyle.setProperties({
17    'color': '#333',
18    'text-decoration': 'none',
19    'padding-left': '12px',
20    'padding-right': '12px',
21    'padding-top': '8px',
22    'padding-bottom': '8px',
23    'border-radius': '4px',
24    'font-weight': '500'
25  });
26
27  // Get the selected element as the container
28  const selectedElement = await webflow.getSelectedElement();
29  
30  // Create a nav container
31  const navMenu = webflow.elementBuilder(webflow.elementPresets.DOM);
32  navMenu.setTag('nav');
33  navMenu.setStyles([navStyle]);
34  
35  // Menu items to add
36  const menuItems = ['Home', 'About', 'Services', 'Portfolio', 'Contact'];
37  
38  // Create all menu items at once and store references for later
39  const menuItemRefs = [];
40  menuItems.forEach(itemText => {
41    const item = navMenu.append(webflow.elementPresets.DOM);
42    item.setTag('a');
43    item.setAttribute('href', '#');
44    item.setTextContent(itemText);
45    item.setStyles([navItemStyle]);
46    // Store reference to set text later
47    menuItemRefs.push(item);
48  });
49  
50  // Add the entire menu to the canvas in one operation
51  if (selectedElement?.children) {
52    await selectedElement.append(navMenu);
53    console.log('Navigation structure with 5 items created in one operation');
54  }
55}

When to use element builder

The element builder is particularly useful for:

  • Complex Element Structures: When creating hierarchies with many nested elements
  • SVG Creation: Perfect for building SVG graphics with many path, circle, or other elements
  • Repeating Patterns: When you need to create many similar elements
  • Performance: More efficient than adding elements one-by-one to the canvas

Best practices

  • Build Complete Structures: Create your entire element structure before adding it to the canvas
  • Set Properties: Configure tags, attributes, styles, and text content on builder elements before appending
  • Track References: If you need to modify elements after adding to canvas, store references to them
  • Batch Operations: Use Promise.all for batch operations when modifying multiple elements