Member-only story
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.
Setting up our Data
Our Airtable for this project looks like this:
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:
https://api.airtable.com/v0/appDMhRWC7kQYHEZO/Receipts?maxRecords=100&view=Grid%20View
Making a simple Dashboard in Framer
To host our data we need to set up some visual design within Framer, our vision here is to build a small dashboard with the following elements:
- A total sales per year text
- A chart showing sales per month
- An easy way to toggle between products that also affects the chart and total sales value
Now that we have our specifications in order, we can continue to build our dashboard. We will be using some external libraries to help us out and speed up the development process.
- For the Chart, we will use ChartJS (https://react-chartjs-2.js.org/)
- For everything else, we will use native Framer components
