×

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

Connecting dynamic data in Builder's Visual Editor

By Kapunahele Wong

With Builder, you can enter data once, use it throughout your site, and when you update that data, it updates everywhere.

You can store images, text, CSS styles, and many other types of data for re-use throughout your app.

Goals

This tutorial shows you how to create some data in Builder and use that data through the following steps:

  • Entering data in Builder
  • Connecting data
  • Using your data to visually build dynamic content

What we'll make

To demonstrate using your Builder data in your app, this post walks you through creating a page of recipes. Each recipe features:

  • a name
  • description
  • prep time
  • button copy
  • an image
  • image alt text for accessibility
  • image credit

Creating some sample data

To create some data to work with, we need to make a model. Models tell Builder what something is. For example, we have to create a Recipe and specify what kinds of things make up a recipe, such as the dish name, description, and prep time.

Defining a model

Click on the Models icon on the Builder left sidenav.

Click the +Create Model button.

In the dropdown that appears, select Data.

Give your new model a name. This example uses "recipe".

When your model is created, click on Recipe to edit.

To add a new piece of data, click on the +New field button at the bottom.

Give this field a name, such as dishName and click +New Field again to add another field.

Name your next fields prepTime , description, image, photoCredit, altText, and buttonCopy. Make sure that you set the image type to file so that you can use an image file later.

👉Tip: You can specify the file type of each data entry. Most of them are text except for two. The Image is of type file, meaning you'll be able to upload a file as the kind of data and Photo credit is Html, meaning you can use rich text, including html–like links and other html tags–in that field and it will render automatically.

Click Save at the top right when you're done.

Using the Recipe model

Now that we've defined what a Recipe is, we can add some recipes to Builder.

Click the Content icon in the left sidenav.

In the Content view, you should now see your Recipe model. Click Recipe. Let's add some data.

Click on the +New button and choose Recipe.

Fill out the new recipe as follows:

  • Content Entry Name: Bouillabaisse
  • Dish name: Bouillabaisse
  • Description: A traditional French fish soup.
  • Image: Link below.
  • Photo credit: Link below.
  • Button copy: Let's make soup!
  • Prep time: 1 hour
  • Type: Soup
  • Alt text: A bowl of soup topped with herbs.

For our soup image, we're using a photo by Innes Linder from Pixabay. You can copy and paste the suggested credit text from Pixabay into the Photo credit field. Because you set that data type as html, the links will work automatically.

When you're done, click the Publish button.

Fill out a second recipe as follows:

  • Content Entry Name: Blueberry Pie
  • Dish name: Blueberry Pie
  • Description: A fruity homemade treat.
  • Image: Link below.
  • Photo credit: Link below.
  • Button copy: Time for pie!
  • Prep time: 45 minutes
  • Type: Dessert
  • Alt text: A freshly baked pie with a lattice crust.

For our pie image, we're using a photo by LaurindaMary from Pixabay.

When you're done adding recipes, you should have two: Bouillabaisse and Blueberry Pie.

Back in the Content section, switch from Recipe to Page under Models.

In the Page section, click the +New button and select Page.

Call the new page Cooking and click the Create Page button.

When you are prompted to choose a starting template, choose Blank. The editor for your new page loads automatically.

Building the Recipe page

In your new page, go to the Featured tab, then Simple and drag and drop the Featured Content template into the working area. This template takes care of most of our styling and is responsive by default so our page will look great on any device.

👉Tip: This tutorial focuses on getting Builder data on the page, so doesn't cover styling and plain text in detail. If you'd like the duplicate the "Delicious Recipes" header, drag in a text box, change the color to a dark orange, and set the font to 40px and Alex Brush.

Now that you have the template on the page, go to the Data tab and click the Builder icon.

When prompted, choose Recipe.

Now the Data tab shows Recipe as a data source. Click the Pick an Entry button.

Let's have dessert first! Choose Blueberry Pie.

Click the header "Something great to say" and then the Options tab.

With the header selected, you can bind your data to it. On the Options tab, click the Bind Data icon with the four dots on the right.

Click the down arrow to select Recipe - Data - Dish Name.

👉Tip: As an alternative to scrolling through the list, you can type in the pull down field to filter the options. Here, we've typed "name". This is a helpful shortcut as your data grows.

Now the name of the Recipe displays as Blueberry Pie in the text field along with a statement in the Options tab notifying you that this text field is connected to a data source.

Select the next section of copy that begins with "Some more great things...".

In the Options tab, click on the Bind Data icon to the right.

Scroll or filter for the Blueberry pie Description.

Now you should see "A fruity homemade treat."

Repeat this process to bind the next field, "Enter some text..." to your Prep time data, and the button text to the Button copy data.

Adding an image

Select the placeholder image in the template. With the image selected, you can bind the pie picture.

To find the Blueberry Pie photo, click the Bind Data icon to the right of the Image Options tab.

Select Recipe - Data - Image.

The pie image should show up as soon as you select it.

Making your image more accessible

Accessible images have alt text, or text that a screen reader can read to describe the image. To bind to our alt text, make sure you're on the Options tab for the image and click on the Bind Data icon to the right of the Alt text field.

Scroll or filter to find and select Recipe - Data - Alt Text.

You won't see the page change, but you're making a big difference for visitors to your site who depend on assistive technology.

👉Tip: See how the Bind Data icon appears throughout Builder? Anywhere you see it means you can bind data specific to that element.

Adding a second data source

Now that you've added one recipe, you can add many more. If you only drag in another recipe card, though, you'll notice that any changes you make also effect the first card. This is because you are currently only connected to one Recipe. We need to add the other recipe so we can get to its data.

In the Data tab, you'll see the current Recipe, but we need to add another. Click the +Connect Data button and select Builder.io or just click the Builder icon.

When prompted, choose Recipe.

Now Recipe 2 appears in the Data tab.

To make the second Recipe's data available, you need to select it so Builder knows which Recipe to use for Recipe 2. Click on the three dots to the right of Recipe 2 to expand the options. Click the Pick an Entry button.

Select Bouillabaisse to associate it with Recipe 2.

Now, when you click the Bind Data icon for the different elements, you'll see that Recipe 2 data is available.

Next steps

This article walked you through creating and using data in Builder. Data binding is a robust feature available throughout Builder, and is available wherever you see the Bind Data icon. 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
Using Contentstack 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