Loops & Repeating Sections

Overview

Loops let you repeat a section of your template for each item in an array. This is essential for documents that contain lists of items — line items on an invoice, students on a certificate batch, products in a catalog, or entries in a report.

How Loops Work

A loop binds a group of elements to an array in your API data. For each object in the array, the template renders a copy of the group with values from that object.

{
  "templateId": "tmpl_invoice",
  "data": {
    "invoice_number": "INV-001",
    "items": [
      { "description": "Design Services", "quantity": 10, "rate": 150, "amount": 1500 },
      { "description": "Development",     "quantity": 20, "rate": 175, "amount": 3500 },
      { "description": "QA Testing",      "quantity": 5,  "rate": 100, "amount": 500 }
    ]
  }
}

Tables vs. Repeating Sections

Document Stack provides two ways to display repeated data:

Tables

The simplest approach for tabular data. Add a Table element, bind it to an array, and define columns. Each array item becomes a row. See Tables for details.

Repeating Sections

For non-tabular layouts — cards, badges, catalog pages — use repeating sections. Group multiple elements together and bind the group to an array. Each item renders as a complete copy of the group.

Creating a Repeating Section

1. Design the layout for a single item using multiple elements (text, fields, images)
2. Select all elements that make up one item
3. Right-click and choose Group as Repeating Section
4. Set the data source to the array key (e.g., products)
5. Map each element's field key to the item property (e.g., name, price)

Accessing Item Fields

Inside a repeating section, field keys reference properties of the current array item. If your data has:

{
  "products": [
    { "name": "Widget Pro", "price": 29.99, "sku": "WGT-001" }
  ]
}

Then field keys inside the repeating section use just the property name —name, price, sku — not products.name.

Layout Direction

Configure how repeated items are arranged:

• Vertical — Items stack top to bottom (default, like a list)
• Horizontal — Items flow left to right (like a row of cards)
• Grid — Items fill a grid with configurable columns

Spacing Between Items

Set the gap between repeated items in the inspector:

• Gap — Space in pixels between each repeated item
• 0px — Items touch each other (useful for table-like layouts)
• 8–16px — Comfortable spacing for card layouts

Page Breaks in Loops

When a loop produces more items than fit on a single page, Document Stack can automatically continue on the next page. Enable Auto Page Breakin the repeating section settings.

Next Steps

• Tables — Tabular data binding
• Multi-Page Templates — Handle long documents
• Build an Invoice — Practical example with line items