Livestream: Build better UIs with AI | 3/13

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Contact Sales
Platform
Developers
Contact Sales

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

Leverage data from your API or a plugin to enhance your builder Pages and Sections.

  • Bind text, styles, images, and more from your application's API.
  • Connect data using built-in plugins to your content entries.

To bind existing data to your page, one of the following must be true:

  • You have access to a public API endpoint.
  • You have connected one or more plugins that provide data. To view your plugins, visit the Plugins section of your Builder account.

To access data from an API, do the following:

  1. Open the API Data panel within the Data tab.
  2. Click + API Data Source.
  3. Provide a unique name for your data within the Property name field.
  4. Provide a URL to your API within the URL field.
  5. Click Done.

Your data is now accessible within the content entry and can be bound like data stored within Builder. For more details on binding data to your content entry, see Bind Data.

Tip: It is possible to filter through data from an API endpoint, but it requires a small amount of coding knowledge. See Connect API Data for more, or work with the developers on your team to choose a more narrow API endpoint.

Example

In the video below, a new API source is added to the Page. That data is then used to repeat multiple images within the Kitchen section, displaying an image for each featured product.

A plugin gives you a way to connect to a data provider. Whether you use one of the built-in plugins or make one yourself, the connection process is the same.

To connect data through a plugin:

  1. Ensure the plugin has already been enabled. For details, see Setting Up Built-in Plugins. If you don't have access to your codebase, your development team might have to configure this for you.
  2. When the plugin has been set up, open a content entry.
  3. In the Builder Visual Editor, go to the Data tab.
  4. Open the Connect Data panel.
  5. Click + Add Data.
  6. Choose your plugin from the list of options.
  7. Select an Entry or Query, as you would when using a Builder Data model. See Connect Data for more.

Builder offers a number of built-in plugins, many of which are for connecting popular data providers to Builder.

You can create dynamic, personalized, data-driven websites and applications with these data providers.

  • Elastic Path: Use your Elastic Path products and categories with Builder.
  • Shopify: Use the Shopify plugin to connect your Shopify store data, such as products, collections, and orders, to your Builder content.
  • Smartling: Smartling streamlines content localization workflows. It can provide translated content data to Builder, facilitating the creation of multilingual sites and experiences.
  • Salesforce B2C Commerce: This plugin allows you to connect to the Salesforce B2C Commerce API, enabling you to access and integrate data related to products, catalogs, and customer information for personalized commerce experiences.
  • Contentstack: The Contentstack plugin enables you to bring your content types and entries from Contentstack's headless CMS into Builder for use within Builder's Visual Editor.
  • BigCommerce: Use the BigCommerce plugin to connect your BigCommerce store data, including products, categories, and pricing, to your Builder content and experiences.
  • Adobe Commerce (Magento): This plugin enables integration with Adobe Commerce (formerly Magento), providing access to e-commerce data such as products, catalogs, and customer information to build engaging commerce experiences.
  • Commercetools: Connect to the commercetools API, a headless commerce platform. It provides access to commerce data to build flexible and scalable e-commerce experiences.
  • Kontent.ai: Kontent.ai helps you to plan, create, and deliver experiences using structured content data from Kontent.ai.
  • Kibo: Connect your Builder app to your Kibo product catalog.
  • Contentful: The Contentful plugin helps you bring your content types and entries from Contentful into Builder's Visual Editor.

For more detail, see Overview of Built-in Plugins. To go directly to the built-in plugins in Builder, open the Integrations section of the Builder app.

Bind Data within your content entry to create dynamic experiences for your users. Or, View and Use State to create bespoke experiences with your connected data.

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

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy

  • Platform Overview

  • Integrations

  • What's New

  • From Design to Code Guide

  • Composable Commerce Guide

  • Headless CMS Guide

  • Headless Commerce Guide

  • Composable DXP Guide

  • Design to Code

  • Blog

  • Knowledge Base

  • Community Forum

  • Partners

  • Templates

  • Success Stories

  • Showcase

  • Resource Center

© 2025 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms

Security & Compliance

Cookie Preferences

Gartner Cool Vendor 2024