Dynamic Content and Data Binding

Overview

Most pages have repeated content: a grid of products, a list of team members, a row of testimonials. Instead of building each card by hand, StretchPages lets you bind an element to a data source and repeat it, so one designed item renders a whole collection. When the underlying data changes, the page reflects it.

How data binding works

Data binding connects an element on your page to a data source — a set of records with fields (for example, title, description, image, url, price). You map the source's fields to the parts of your element (its field map), and optionally turn on repeat so the element renders once per record.

• Source — where the data comes from.
• Repeat — render one copy of the element per record in the source.
• Field map — which source field fills which part of the element (e.g., title → the card heading, image → the card image).

Data sources

StretchPages includes a built-in sample source with example records (title, subtitle, description, price, image, url, category) so you can design and preview a bound layout immediately. You can also connect to a collection so your page pulls from real records managed in your workspace — for example a set of products or listings — through the suite's collections endpoint.

Bind and repeat an element

1. Design one item first — for example a card: a container with an image, a heading, a short description, and a button.
2. Select the item's container.
3. Open its binding settings and choose a data source (start with the sample source to see it work).
4. Map the source fields to the parts of your card (image → the image element, title → the heading, description → the text, url → the button link).
5. Turn on repeat so the card renders once per record.
6. The canvas now shows a full grid of cards generated from the data.

Example: a product grid

You want a page section showing your products. You build one product card and bind its container to your product collection. You map image to the card image, title to the heading, price to a text element, and url to the "View" button. You enable repeat, and the section fills with every product in the collection. When you add a product to the collection, the page shows it automatically — no page edit needed.

Combine with display conditions

Because conditions include a data type, you can show or hide bound elements based on their data — for example, only show a "Sale" badge on records flagged as discounted. See Popups and display conditions.

Tips

• Design the single item well first. A clean, well-styled card multiplies into a clean grid.
• Start with the sample source to confirm your field mapping and layout, then switch to your real collection.
• Map every visible field — an unmapped image or heading will render empty for each record.
• Put the repeat on a grid or flex container so the generated items lay out neatly.
• Keep the item responsive — since every record uses the same design, fixing it once fixes the whole grid on mobile.

Troubleshooting

My bound section is empty. The chosen source may have no records yet (for example, a collection that isn't populated). Switch to the sample source to confirm the binding works, then point it at a source with data.

Every card shows the same content. Repeat may be off, so you're seeing one record. Turn repeat on so the element renders once per record.

A field renders blank on every card. That part of the element isn't mapped, or it's mapped to a field the source doesn't have. Re-check the field map against the source's fields.

Images don't load. Confirm the image field contains valid image URLs and is mapped to the image element.

FAQ

Where does the data come from? From a data source — the built-in sample source for design, or a connected collection for real content managed in your workspace.

Do updates to the data show on the live page? Yes — because the page renders from the source, updating the underlying records updates what visitors see, without editing the page's layout.