Made in Builder.io

Watch the biggest Figma-to-code launch of the year

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're using Builder's Gen 1 SDKs and data binding on a provider with edge workers, such as Cloudflare, Netlify, or Vercel, you might encounter a situation where certain dependencies are automatically removed in their ISR (Incremental Static Regeneration) functions.

Two indicators can help identify this issue:

  • Hydration errors—where the SSR and the client side version are different—because the data binding did not execute on the server side.
  • Missing data that populates on the client side; that is, the data binding is not executing on the server side.

This can lead to a failure with the function safeDynamicRequire. In such cases, consider applying the following workaround.

In the pages/_document.jsx file or any server-only execution location, add the following code:

import ivm from 'isolated-vm'
import { Builder } from '@builder.io/react'

const isolate = new ivm.Isolate({ memoryLimit: 128 });
const context = isolate.createContextSync();
Builder.setServerContext(context);

If there's no _document.tsx file in the project, you can add the code anywhere but wrap it with this condition:

if (Builder.isServer) {
  // Add the provided code here
}

This workaround should prove helpful when using Builder's Gen 1 React SDK on the server side with Vercel or similar platforms where automatic dependency removal might cause issues.

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:


Looking to hire a third party to help with your project?

Submit a project request and our partnerships team will reach out to connect you with an Expert from our partner ecosystem.

Connect with us

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