This component isn’t actively supported anymore. Please use the Data Component by Iain Kettles instead. You can see how powerful it is by reading this article.

Overview

This Airtable Component allows you to connect any of your Airtable’s API with any design component in your canvas, without any code!

How does it work?

See this video in youtube if you want to see a real example.

It’s super easy! You just need to follow three simple steps:

1. Create a design component in the canvas and enable the layers to be overriden. Make sure you name the design overrides the same as the columns you want to retrieve from your data base.

   Note:

   • Names are case sensitive.
   • Spaces are not accepted. Column names that contain spaces cannot be retrieved, so in order to retrieve it you can change the space for a _ or use Camel casing.

2. Enter your Airtable API url on the component’s properties section.

   Your url should look like something similar to this: e.g. https://api.airtable.com/v0/appJgy4S2EYMigkNg/Colors?api_key=YOUR_API_KEY

   Note: If you don’t know how to get the API url, see here for more information.

   If you entered a valid link, a ✅ sign will appear on step 2.

3. Connect the Airtable Component to your design component.

MAGIC HAPPENS! ✨

What does it do?

It will populate the design component you created with the data coming from your Airtable API and duplicate it as many times as the number of rows in your data.

All the cards are going to be inside a scrollable area, which can be horizontal or vertical, so it can be fully adapted to your designs. It also offers all the Stack’s options so you can customize it even further.

Any questions?

Join this thread in our Spectrum community:

You’ll find the FAQ and you can ask anything you want :)

Contact me

If you come up with more functionality or you find any bugs, please contact me!

Twitter: @aroagilbo Email: aroa@framer.com

*P.S: Big thanks to Fernando Hurtado & Iain Kettles <3