Framer & Airtable take your data to new heights

I’ve been frequently asked about connecting Framer with backend services such as Airtable, Xano, or Supabase. The answer is always the same, it works and it works great.

So let’s see how you can build a small dashboard visualizing sales data that come from Airtable.

Photo by Isaac Smith on Unsplash

Setting up our Data

Our Airtable for this project looks like this:

A long list of transactions

Some important elements here are the prices, the dates and of course the name of the products, we want those to be consistent and with the same format.

Accessing the Airtable API

Every Airtable Datagrid has a convenient REST API page, for us, it looks like this: https://airtable.com/appDMhRWC7kQYHEZO/api/docs

From here we could use the Airtable SDK to pull the data but at the time of writing there are some issues with Framer’s SSR (server-side rendering), so we are using plain javascript fetch (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to pull the data in. So we are only keeping the URL part from the Airtable API, which looks like this: