Skip to main content
The Repeating Group is a powerful element designed to display lists or grids of items dynamically. It works by iterating over an array of data you provide and rendering a template of UI elements for each item in that array. This is the go-to element for creating product lists, user directories, social media feeds, comment sections, and any other interface that displays a collection of repeating data.

​
How it Works: The Core Concept

A Repeating Group has two main parts:
  1. The Data Source: An array of data that you want to display (e.g., an array of user objects from an API).
  2. The Item Template: A single set of UI elements (like an image, text, and a button) that you design inside the Repeating Group.
The Repeating Group will then automatically create a copy of your Item Template for every single item in the Data Source array.

​
How to Add and Configure

  1. Add the Element: Drag a Repeating Group from the “Elements” panel onto your page.
  2. Set the Data Source: With the Repeating Group selected, go to the Custom section in the right-side panel. Set the Data property to the array you want to iterate over. This can be bound to an API response, a state variable, or any other data source that returns an array.
    The data source for a Repeating Group must be an array. If the data is not an array, the element will not render anything.
  3. Build the Item Template: Drag other elements inside the Repeating Group. For example, to build a user card, you might drag a Container, an Image, and a Text element inside. You only need to design this template once.

​
Accessing Iteration Data

To make the template dynamic, you need to access the data for the specific item being rendered in each repetition. The Repeating Group makes this data available through two special context variables:
​
currentItem
object | any
The data object for the current item in the iteration. For example, if you are iterating over an array of users, currentItem would be the user object for that specific repetition.
​
currentIndex
number
The index number of the current item in the array, starting from 0.
You can use these variables to bind data to the elements in your template. Example: Displaying a List of Users Imagine your data source is an array of user objects like this: 
[
  { "name": "Alice", "email": "[email protected]" },
  { "name": "Bob", "email": "[email protected]" },
  { "name": "Charlie", "email": "[email protected]" }
]
  1. You set this array as the Data for the Repeating Group.
  2. Inside the Repeating Group, you add a Text element.
  3. To display the user’s name, you set the Text element’s content property to {{currentItem.name}}.
  4. You add another Text element and set its content to {{currentItem.email}}.
The Repeating Group will automatically generate three pairs of Text elements, each displaying the name and email from the corresponding user object.

​
Layout and Arrangement

A Repeating Group acts like a container for its generated items. You can control how the items are arranged using its layout properties (Flexbox) in the right-side panel.
  • Direction: Set to Column to create a vertical list, or Row to create a horizontal list.
  • Wrap: If Direction is Row, enable Wrap to create a grid that wraps to the next line when items run out of space.
  • Gap: Set the spacing between each repeated item, both vertically and horizontally.
  • Alignment: Use Justify Content and Align Items to control the position of your items within the Repeating Group container.

​
Styling

You can style the main Repeating Group container itself with properties like:
  • Background: Set a background color for the entire list area.
  • Padding: Add space around the entire group of items.
  • Borders and Shadow: Add borders and shadows to the main container.