Data sources & bindings.

Create a data source

1. 1

   Open Data

   Choose Data in the top bar and add a source with a descriptive name and key.

2. 2

   Choose the source type

   Use JSON / Local data for content saved with the project. Use REST API / Public JSON for a public GET endpoint.

3. 3

   Provide data and preview samples

   For local data, enter valid JSON. For a REST source, enter the endpoint, an optional response path such as data.items, and a representative sample response.

4. 4

   Validate and save

   Use the available validation or test control, inspect its result, then choose Add source or Save source.

Bind a field to an element

Select an element and open its Data controls. Choose a Text field for an eligible text element, Image URL for an image, or Link URL for a link. Select a field path and check the displayed sample.

Use a Fallback for a missing field. Choose a scalar text or URL value rather than a whole object. Keep image and link values suitable for their destinations.

Repeat a container from a collection

1. 1

   Choose a template container

   Select a supported div, section, article, or li container and use Repeat this container.

2. 2

   Choose an array

   Set Collection to an array in your data. Each item supplies one copy of the container.

3. 3

   Bind children to the item

   Inside the template, bind fields such as item.title and item.image. Set Maximum items and the Loading, Empty, and Error messages.

Use public, browser-accessible data

REST sources run browser requests and require the endpoint to allow CORS. This workflow does not store authentication cookies, authorization headers, or API secrets. For a private service, have your own backend expose only the public content the page needs.

Data and samples are included in project backups. Saved local JSON also appears in exports. Do not put private customer records, credentials, or secret tokens in source data or preview samples.

If the content is missing

• Check that the JSON is valid and the response path matches the actual response.
• Confirm that the selected field exists in both your sample and real data.
• For repetition, choose an array and use item fields inside its template.
• If sample preview works but the endpoint fails, check the URL, CORS, and response in the browser.
• Review loading, empty, and error states in the exported application.