Data binding

Also known as: data-binding

What is data binding?

When you design a new app, chatbot or UI element then nearly every text, image or button label in your design needs to made live in the actual end product.

For example, let's say you designed a profile page with a nice avatar and the name of your user. When a developer starts to write the HTML of that page they will need to bring in the actual name and photo of the respective user. The process of inserting this real data is called data-binding.

There are many ways different programming languages allow data binding, but for our Card Designer we've chosen Liquid.

What is Liquid?

Liquid logo

Liquid is a layouting language made by the e-commerce platform Shopify. If you want to data-bind with Liquid, you just write your page or Card any way you want using HTML. You can have columns, tables, CSS styling – whatever you want.

Then in all the places where you want something real to appear you just enter two curly braces, e.g.

This is called an Object and it makes it super simple to mix real data into regular HTML markup.

Depending on the API you've connected to the Card Designer, nearly every JSON object, array and boolean can simply be inserted into the HTML by creating a double curly brace, i.e. for the user's name and for their photo.

We have a chapter in our Docs that explains how you can use Liquid within the Cards Designer