Whisker Leaks
How to Connect Airtable and Framer
Learn how to connect Airtable to Framer, sync content, handle limitations, and build flexible, dynamic websites with CMS collections.
Framer’s new Airtable integration makes it incredibly easy to build dynamic websites powered by structured content. While the integration is still evolving and has some limitations with certain field types, this guide will walk you through how to get started and explore two practical approaches. First, we’ll create content directly from your Airtable data, which works well for simple use cases.
Then we’ll take it a step further by setting up a one-to-one relationship between an Airtable base and a Framer CMS collection. This second method requires a bit more setup but gives you much more flexibility, especially when working with related records or more complex data structures. It opens up new possibilities for programmatically building pages based on rich, interconnected content.
How to Connect Airtable to Framer Using the Native Integration
1. Install the Airtable Plugin in Framer
Open your Framer project.
Navigate to the Framer Marketplace.
Search for “Airtable” and install the official plugin developed by Framer. Framer+1Framer+1Framer
2. Authenticate Your Airtable Account
After installation, open the plugin.
Click on “Connect Airtable Account”.
You'll be prompted to log in to Airtable and authorize Framer to access your bases.FramerForms | Custom forms in Framer
3. Select Your Base and Table
Once authenticated, you'll see a list of your Airtable bases.
Choose the base and specific table you want to sync with Framer.
4. Map Airtable Fields to Framer CMS Fields
The plugin will display your Airtable fields.
Map each Airtable field to the corresponding Framer CMS field.
5. Import Your Data
After mapping, click on “Import”.
Your Airtable data will be imported into the Framer CMS.
The plugin remembers your settings, allowing for one-click re-syncs in the future.
6. Design with Dynamic Content
Use Framer's CMS components to bind your design elements to the imported data.
For example, you can create dynamic lists, detail pages, or galleries that automatically update based on your Airtable content.
Keeping Data in Sync
The native integration supports one-click syncing. Whenever you update your Airtable base, simply open the plugin in Framer and click “Sync” to fetch the latest data. This ensures your website always reflects the most current information from Airtable.
In my experience, large datasets will understandably take a few minutes to sync. For instance, the cities dataset with ±1500 records takes 2-3 minutes to sync.
Tips for a Smooth Integration
Verify slugs are all correctly formatted and unique. This is the biggest source of errors with Framer's Airtable integration. Pro-tip, create a script that checks your base for slug duplicates!
Field Types: Ensure that the field types in Airtable are compatible with Framer's CMS. For instance, use attachment fields for images and single-line text for titles.
References: If you're using linked records in Airtable, make sure to map them appropriately to Framer's reference fields.
Data Volume: For large datasets, consider using Airtable views to filter and manage the data you import into Framer.
Part 2: Creating a One to One Relationship Between Airtable and Framer
Sometimes the Airtable integration won’t bring across all the data you need. Maybe you're working with field types that don’t sync well, or you want to create new data that only lives in Framer. In those cases, it's useful to create a one to one relationship between your Airtable table and a Framer CMS collection.
Step 1: Set Up a Matching CMS Collection in Framer
Create a new CMS collection in Framer. All you really need to start is a Name field and a related Category field that links to another Framer collection. This sets up the foundation for referencing and extending the data however you like.
Step 2: Fill in Missing or Supplementary Data
Use this collection to store any information that doesn’t come through from Airtable or that you prefer to manage inside Framer. For example, you might want to add custom layout overrides, internal-only labels, or additional metadata that supports your site design. This gives you full control while still keeping Airtable as your primary source for most content.
On this site, I use the Framer CMS collections to manage relationships between my objects that I can't pull from Airtable. For instance the cities <> country relationship is managed as a related collection element in this site.
Framer’s new Airtable integration makes it incredibly easy to build dynamic websites powered by structured content. While the integration is still evolving and has some limitations with certain field types, this guide will walk you through how to get started and explore two practical approaches. First, we’ll create content directly from your Airtable data, which works well for simple use cases.
Then we’ll take it a step further by setting up a one-to-one relationship between an Airtable base and a Framer CMS collection. This second method requires a bit more setup but gives you much more flexibility, especially when working with related records or more complex data structures. It opens up new possibilities for programmatically building pages based on rich, interconnected content.
How to Connect Airtable to Framer Using the Native Integration
1. Install the Airtable Plugin in Framer
Open your Framer project.
Navigate to the Framer Marketplace.
Search for “Airtable” and install the official plugin developed by Framer. Framer+1Framer+1Framer
2. Authenticate Your Airtable Account
After installation, open the plugin.
Click on “Connect Airtable Account”.
You'll be prompted to log in to Airtable and authorize Framer to access your bases.FramerForms | Custom forms in Framer
3. Select Your Base and Table
Once authenticated, you'll see a list of your Airtable bases.
Choose the base and specific table you want to sync with Framer.
4. Map Airtable Fields to Framer CMS Fields
The plugin will display your Airtable fields.
Map each Airtable field to the corresponding Framer CMS field.
5. Import Your Data
After mapping, click on “Import”.
Your Airtable data will be imported into the Framer CMS.
The plugin remembers your settings, allowing for one-click re-syncs in the future.
6. Design with Dynamic Content
Use Framer's CMS components to bind your design elements to the imported data.
For example, you can create dynamic lists, detail pages, or galleries that automatically update based on your Airtable content.
Keeping Data in Sync
The native integration supports one-click syncing. Whenever you update your Airtable base, simply open the plugin in Framer and click “Sync” to fetch the latest data. This ensures your website always reflects the most current information from Airtable.
In my experience, large datasets will understandably take a few minutes to sync. For instance, the cities dataset with ±1500 records takes 2-3 minutes to sync.
Tips for a Smooth Integration
Verify slugs are all correctly formatted and unique. This is the biggest source of errors with Framer's Airtable integration. Pro-tip, create a script that checks your base for slug duplicates!
Field Types: Ensure that the field types in Airtable are compatible with Framer's CMS. For instance, use attachment fields for images and single-line text for titles.
References: If you're using linked records in Airtable, make sure to map them appropriately to Framer's reference fields.
Data Volume: For large datasets, consider using Airtable views to filter and manage the data you import into Framer.
Part 2: Creating a One to One Relationship Between Airtable and Framer
Sometimes the Airtable integration won’t bring across all the data you need. Maybe you're working with field types that don’t sync well, or you want to create new data that only lives in Framer. In those cases, it's useful to create a one to one relationship between your Airtable table and a Framer CMS collection.
Step 1: Set Up a Matching CMS Collection in Framer
Create a new CMS collection in Framer. All you really need to start is a Name field and a related Category field that links to another Framer collection. This sets up the foundation for referencing and extending the data however you like.
Step 2: Fill in Missing or Supplementary Data
Use this collection to store any information that doesn’t come through from Airtable or that you prefer to manage inside Framer. For example, you might want to add custom layout overrides, internal-only labels, or additional metadata that supports your site design. This gives you full control while still keeping Airtable as your primary source for most content.
On this site, I use the Framer CMS collections to manage relationships between my objects that I can't pull from Airtable. For instance the cities <> country relationship is managed as a related collection element in this site.
Framer’s new Airtable integration makes it incredibly easy to build dynamic websites powered by structured content. While the integration is still evolving and has some limitations with certain field types, this guide will walk you through how to get started and explore two practical approaches. First, we’ll create content directly from your Airtable data, which works well for simple use cases.
Then we’ll take it a step further by setting up a one-to-one relationship between an Airtable base and a Framer CMS collection. This second method requires a bit more setup but gives you much more flexibility, especially when working with related records or more complex data structures. It opens up new possibilities for programmatically building pages based on rich, interconnected content.
How to Connect Airtable to Framer Using the Native Integration
1. Install the Airtable Plugin in Framer
Open your Framer project.
Navigate to the Framer Marketplace.
Search for “Airtable” and install the official plugin developed by Framer. Framer+1Framer+1Framer
2. Authenticate Your Airtable Account
After installation, open the plugin.
Click on “Connect Airtable Account”.
You'll be prompted to log in to Airtable and authorize Framer to access your bases.FramerForms | Custom forms in Framer
3. Select Your Base and Table
Once authenticated, you'll see a list of your Airtable bases.
Choose the base and specific table you want to sync with Framer.
4. Map Airtable Fields to Framer CMS Fields
The plugin will display your Airtable fields.
Map each Airtable field to the corresponding Framer CMS field.
5. Import Your Data
After mapping, click on “Import”.
Your Airtable data will be imported into the Framer CMS.
The plugin remembers your settings, allowing for one-click re-syncs in the future.
6. Design with Dynamic Content
Use Framer's CMS components to bind your design elements to the imported data.
For example, you can create dynamic lists, detail pages, or galleries that automatically update based on your Airtable content.
Keeping Data in Sync
The native integration supports one-click syncing. Whenever you update your Airtable base, simply open the plugin in Framer and click “Sync” to fetch the latest data. This ensures your website always reflects the most current information from Airtable.
In my experience, large datasets will understandably take a few minutes to sync. For instance, the cities dataset with ±1500 records takes 2-3 minutes to sync.
Tips for a Smooth Integration
Verify slugs are all correctly formatted and unique. This is the biggest source of errors with Framer's Airtable integration. Pro-tip, create a script that checks your base for slug duplicates!
Field Types: Ensure that the field types in Airtable are compatible with Framer's CMS. For instance, use attachment fields for images and single-line text for titles.
References: If you're using linked records in Airtable, make sure to map them appropriately to Framer's reference fields.
Data Volume: For large datasets, consider using Airtable views to filter and manage the data you import into Framer.
Part 2: Creating a One to One Relationship Between Airtable and Framer
Sometimes the Airtable integration won’t bring across all the data you need. Maybe you're working with field types that don’t sync well, or you want to create new data that only lives in Framer. In those cases, it's useful to create a one to one relationship between your Airtable table and a Framer CMS collection.
Step 1: Set Up a Matching CMS Collection in Framer
Create a new CMS collection in Framer. All you really need to start is a Name field and a related Category field that links to another Framer collection. This sets up the foundation for referencing and extending the data however you like.
Step 2: Fill in Missing or Supplementary Data
Use this collection to store any information that doesn’t come through from Airtable or that you prefer to manage inside Framer. For example, you might want to add custom layout overrides, internal-only labels, or additional metadata that supports your site design. This gives you full control while still keeping Airtable as your primary source for most content.
On this site, I use the Framer CMS collections to manage relationships between my objects that I can't pull from Airtable. For instance the cities <> country relationship is managed as a related collection element in this site.