×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Get StartedLogin

Product

Features

Integrations

Developers

GET STARTED

PROJECTS

Builder

Builder SDKs, examples, starters, and plugins

Mitosis

Universal component compiler. Write components once and compile to Vue, React, Svelte, Angular, and more

Qwik

Extreme high speed frontend framework

Builder

Builder SDKs, examples, starters, and plugins

Qwik

Extreme high speed frontent framework

Pricing

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

Made in Builder

‹ Back to blog

Using Contentstack data in Builder's Visual Editor

By Kapunahele Wong

When you have data that resides in Contentstack that you want to use in your Builder app, you can use Builder's data provider plugins to fetch and display it on your site.

Goals

This tutorial shows you how to use Builder's data provider plugins to get data from ContentStack into your Builder app through the following steps:

  • Enabling Contentstack
  • Authenticating to Contentstack
  • Using your data in your Builder app

The sample data

In this example, we're using Contentstack with some placeholder data. Depending on your data, this part might be different for you.

In Contentstack, we have a stack with content types of ArticleCategory, Author, BlogPost, and Signature.

In Contentstack's Entries section, we have some sample data, which includes two blog posts that we'll use in our Builder app.

Enabling Contentstack

To enable a third-party data provider, you have to configure Builder to be able to see the provider.

Open a page in the Builder visual editor.

In the page, open the Data tab.

The Data tab displays the sources available. Builder as a data source works by default, but the other options need you to enable them. In this example, we’ll enable Contentstack, so click the icon for Contentstack.

Authenticating to Contentstack

In order for Builder and Contentstack–or other data provider–to communicate, you must authenticate from within Builder.

When you enable a data provider, Builder prompts you to configure your settings at the bottom of the screen.

Click Configure so you can authenticate.

👉Tip: If you miss this prompt, you can still continue setting up your data provider by going to Integrations and clicking on the Settings button for that data provider.

In the settings dialogue, enter your API key, Delivery token, and Environment name.

👉Tip: To find the Contentstack API key, Delivery Token, and Environment name, check the following places in Contentstack:

  • API key: Settings -> Stack
  • Delivery token: Settings -> Tokens -> select your token
  • Environment name: Settings -> Environments

Paste in the values you gathered from Contentstack and click the Connect button.

Using your Contentstack data

Now that you've authenticated, you can click on the Contentstack icon in the Data tab to see your resources.

Choose the blogpost resource.

Drag a Text block onto the +Add Block section.

On the Data tab, you should now see your Contentstack Blogpost featured at the top. Click Pick an Entry.

Select My first blog post.

On the Options tab, click on the four dots in the upper right corner.

Scroll down and select Blogpost - Entry - Title.

When you click away, you'll see that the blog post title now populates the text field and there's a note that the text field is bound to dynamic data.

👉Tip: If you need to change the data you're binding to, click the four dots to the right of the note in the Options tab.

Now you can continue to add more elements to your page to build the rest out, all connected to dynamic data managed in Contentstack!

Next steps

This article walked you through pulling in a single piece of data from Contentstack. Data binding is a robust feature available throughout Builder, wherever you see the four dots. You can use data binding to get styles, list data, and you can even filter your results.

Read more on the blog
$14m to build faster together
Using Contentful data in Builder's Visual Editor
Connecting dynamic data in Builder's Visual Editor

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

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

Sign up

Log in

DEVELOPERS

Builder for Developers

Developer Docs

Github

JSX Lite

Qwik

INTEGRATIONS

React

Angular

Next.js

Gatsby

PRODUCT

Product features

Pricing

RESOURCES

User Guides

Blog

Forum

Templates

COMPANY

About

Careers 🚀

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.
Get Started
Log in

DEVELOPERS

Builder for Developers

Developer Docs

Open Source Projects

INTEGRATIONS

All Integrations

Shopify

React

Angular

Next.js

Gatsby

RESOURCES

User Guides

Blog

Community Forum

Templates

Partners

PRODUCT

Features

Pricing

© 2021 Builder.io, Inc.

Security

Privacy Policy

Terms of Service