Watch Webinar: Figma - Design to Code in 80% Less Time

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Talk to Us
Platform
Developers
Talk to Us

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

By connecting to your API data, you can bind a single element or iterate over your data in the Builder Visual Editor. This tutorial covers how to set up an element, connect your data, and bind singly or iterate through your data.

To follow the example, you can use your own JSON API endpoint, tweaking to your needs, or use the one from the tutorial:

https://randomuser.me/api?results=10

To iterate over a list of entries in your data, first set up a repeatable element that can accommodate your data objects. If you already have a repeatable element, check your structure against these instructions or skip to the next section.

  1. Create a Page if you don't have one already.
  2. Within the Visual Editor drag and drop a Box block from the Insert tab into the content area.
  3. Drag and drop another Box block into the first Box. Now you have one Box nested within another Box.
  4. Drag and drop an Image block into the inner Box.
  5. Select the Box that wraps the image, and give it a width of 200px.
  6. Drag and drop a text box below the Image, within the same Box as the Image.

The following video demonstrates this process:

To add your JSON API endpoint:

  1. Go to the Data tab.
  2. In the API Data section, click the + API Data Source button.
  3. Name the Data Source according to your use case. This example uses users.
  4. Paste your JSON API endpoint URL into the input field. The format of this URL depends on your API. If you'd like to use the example endpoint, paste in https://randomuser.me/api?results=10.
  5. Click the Done button.

The following video demonstrates providing your endpoint URL:

After you've connected your data by specifying your JSON API endpoint, you can bind a single piece of data, multiple items, or iterate through your data.

Tip: Iterating, or repeating, the element for every item in your data is optional. If you'd prefer only to bind one item, skip to the next section.

To cause the smaller box, the one that contains the image, to repeat for every item coming in from an API, do the following:

  1. Select the inner Box that contains the Image and Text blocks.
  2. Still in the Data tab, expand the Element data bindings section.
  3. For Repeat for each, click the down arrow and select what you'd like to list. This example uses Results. This provides one item per result in the array.
  4. Select an Image block.
  5. In the Element data bindings section, click the + New Binding button.
  6. For the Get dropdown, select Image.
  7. For the From dropdown menu, select the large picture option, Results Item - Picture - Large.
  8. Select a Text block.
  9. In the Element data bindings section, click the + New Binding button.
  10. For the Get dropdown, select Text.
  11. For the From dropdown menu, select the large picture option, Results Item - Name - First.

The following video demonstrates iterating through 10 users from the example endpoint:

Iterating over your data is optional. You could instead bind to a single element, rather than iterate over all data from the endpoint. For example, to bind to the value for the first name for the first item in the array:

  1. Select an unbound Text box.
  2. In the Data tab, after having provided your JSON API endpoint, expand the section Element Data Bindings.
  3. For Get, choose Text.
  4. For From, select or enter in the code editor state.users.results[0].name.first

If you are facing issues running your data bindings on SSR, please consult our integration tips to learn more.

After your data is displaying, you can style your content however you like. As an example, this video shows changing the layout to a grid pattern by selecting the outermost Box, setting the Inner Layout to Grid, and applying a margin.

For more information, read:

Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Newsletter

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy