Repeat formula

Using the repeat formula, you can create multiple instances of an element based on a set of data. This enables you to build dynamic lists, grids and other repeating UI structures without needing to copy and paste elements or components.

Example

Learn how the repeat formula is used to display multiple cards.

The repeat formula:

Creates a new element for each item in a data array
Makes the current item available as Item within the repeated element
Automatically updates when data changes
Can be applied to any element or component

Using the repeat formula

A repeat formula is visible in the formula editor. Blue fx buttons next to repeat and repeat key on the right attributes panel show that both the repeat and repeat key formulas are active. The visible repeat formula shows that the selected component in the HTML element tree is repeated based on data from the _CARDS variable. The _CARDS variable is an array, and as such, the demo card is repeated for every element in the _CARDS array.

Live

To create dynamic content with the repeat formula:

1
Select the element you want to repeat
2
In the attributes panel, click the fx button next to Repeat
3
Enter a formula that returns an Array; the element will be repeated for each item in the array
4
Set a Repeat key

Info

The output of your repeat formula must be iterable (an Array of items).

Accessing data in repeated elements

Using the repeat item variables you can customize each item based on its data and position.

Within repeated elements, you can access:

Item: The current item from the array
Index: The position of the current item (starting from 0)

Creating numeric ranges

If you want to repeat an element a specific number of times without dynamic data, you can use the Range formula. This is useful for pagination, grid layouts or any situation where you need a specific number of repeated elements.

Example

See how you can generate multiple cards using the Range formula.

Optimizing performance with the repeat key

To ensure efficient updates and tracking of repeated elements, you can use a repeat key. You can use any unique identifier for an item's repeat key, such as a unique ID attached to the item if it is being fetched from a database. Alternatively, you can use the formula editor to build a formula that generates a unique identifier for each item, for example list-item-{id}.

Tip

Using the index as a key prevents Nordcraft from making optimizations. Use a unique identifier, like a database ID or content hash. Duplicate keys disable performance optimizations.

How the repeat key improves performance

The repeat key formula improves performance of your project in several ways:

Enables Nordcraft to track specific items across renders
Allows reuse of page elements instead of recreating them
Prevents unnecessary re-rendering of unchanged items
Maintains element state when items change position

This is especially important when:

Working with large data sets
Implementing drag-and-drop reordering
Frequently updating or filtering data
Adding or removing items from the middle of a list