Bulk Add Elements

webflow.elementBuilder(preset)

Creates a builder for efficiently constructing complex element hierarchies before adding them to the canvas. This method is optimized for bulk creation of elements, particularly useful when dealing with complex hierarchical designs like SVG graphics or nested components.

The element builder approach allows you to:

  1. Create an entire structure of elements in memory
  2. Configure all elements before adding to the canvas
  3. Add the entire structure to the canvas in a single operation
Current Limitations
  • DOM Elements Only: Currently, only DOM elements can be used as root or child elements with this method.
  • Canvas Insertion: The builder elements must be appended to an actual element on the canvas to be visible.
  • Setting styles and text content: Styles and text content must be set after the elements are added to the canvas.

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 methods like:

  • 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

Examples

This example shows how to create a nested SVG structure:

1async function webflowRainbow() {
2  // Get the selected element as the container
3  const selectedElement = await webflow.getSelectedElement();
4  
5  // Create an SVG builder element
6  const svgBuilder = webflow.elementBuilder(webflow.elementPresets.DOM);
7  svgBuilder.setTag('svg');
8  svgBuilder.setAttribute('viewBox', '0 0 100 100');
9  svgBuilder.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
10  svgBuilder.setAttribute('width', '200');
11  svgBuilder.setAttribute('height', '200');
12  
13  // Create rainbow circular background with multiple circles
14  const backgroundElements = [];
15  const rainbowColors = [
16    'hsl(0, 90%, 55%)',    // Red
17    'hsl(30, 90%, 55%)',   // Orange
18    'hsl(60, 90%, 55%)',   // Yellow
19    'hsl(120, 90%, 55%)',  // Green
20    'hsl(240, 90%, 55%)',  // Blue
21    'hsl(270, 90%, 55%)',  // Indigo
22    'hsl(300, 90%, 55%)'   // Violet
23  ];
24  
25  for (let i = 0; i < 7; i++) {
26    const circle = svgBuilder.append(webflow.elementPresets.DOM);
27    circle.setTag('circle');
28    circle.setAttribute('cx', '50');
29    circle.setAttribute('cy', '50');
30    circle.setAttribute('r', `${46 - (i * 3)}`);
31    circle.setAttribute('fill', 'none');
32    circle.setAttribute('stroke', rainbowColors[i]);
33    circle.setAttribute('stroke-width', '2.5');
34    circle.setAttribute('opacity', '0.9');
35    backgroundElements.push(circle);
36  }
37  
38  // Create the central background circle
39  const centralCircle = svgBuilder.append(webflow.elementPresets.DOM);
40  centralCircle.setTag('circle');
41  centralCircle.setAttribute('cx', '50');
42  centralCircle.setAttribute('cy', '50');
43  centralCircle.setAttribute('r', '32');
44  centralCircle.setAttribute('fill', 'white');
45  
46  // Create the "Webflow" logo
47  const logoPath = svgBuilder.append(webflow.elementPresets.DOM);
48  logoPath.setTag('path');
49  logoPath.setAttribute('d', 'M61.3811 14L43.0716 49.7933H25.8737L33.5362 34.959H33.1924C26.8709 43.1653 17.439 48.5674 4 49.7933V35.1643C4 35.1643 12.5972 34.6565 17.6513 29.3429H4V14.0003H19.3426V26.6194L19.687 26.6179L25.9565 14.0003H37.5597V26.5393L37.9041 26.5388L44.4089 14H61.3811Z');
50  logoPath.setAttribute('fill', '#146EF5');
51  logoPath.setAttribute('fill-rule', 'evenodd');
52  logoPath.setAttribute('clip-rule', 'evenodd');
53  logoPath.setAttribute('transform', 'translate(30.5, 30.5) scale(0.7)');
54  
55  // Add the entire SVG structure to the canvas in one operation
56  if (selectedElement?.children) {
57    await selectedElement.append(svgBuilder);
58    console.log('webflow logo created successfully');
59  }
60}

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 and attributes on builder elements before appending
  • Set Styles and Text Content after building: Set styles and text content after elements are added to the canvas
  • 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
Built with