Back to home
How to Sync Airtable and Webflow (the easy way)
Use Cases

How to Sync Airtable and Webflow (the easy way)

Connect Airtable base to your Webflow CMS in ten quick steps

Matthew Busel
April 2, 2022

Airtable + Webflow is one of the most powerful combinations in all of no-code. By syncing Airtable and Webflow, you can create job boards, automated SEO pages, resource lists, and more.

In this short tutorial, I’ll walk through how to sync data between Airtable and Webflow step-by-step. To do this, we’ll use Whalesync, which was purpose-built to sync these two tools. Whalesync handles things like multi-reference and rich text fields out of the box and syncs data in real-time.

The video tutorial, step-by-step guide, and interactive demo cover roughly the same steps, so feel free to pick the style you prefer 🙂.

Video Tutorial - Sync Airtable to Webflow

Step-By-Step Guide

1. Prep Airtable

  • Create a table/field in Airtable for every table/field in Webflow you want to sync
Example of matching fields in Webflow / Airtable

📌 Note - you do not have to sync every table/field 📌

2. Prep Webflow

  • Ensure that any collection you want to sync with Airtable is empty in Webflow.
  • Publish your site to all domains

3. Go to Whalesync and create a new base

4. Grab your Airtable API key

  • Go to your Airtable base and click the Account button in the top right
  • Then choose “Account”
  • From the Account overview page, copy the API key and paste it into Whalesync

5. Grab your Airtable base sharing link

  • Go back to your Airtable base and click the “Share” button in the top right
  • Choose “Base”
  • Then “Create a shared link to the whole base”
  • Then “Private read-only link”
  • Finally, copy the base sharing link
  • And paste it into Whalesync

📌 Note - Airtable is rolling out an update to their base sharing link UI soon, so the last few steps may look slightly different for some users📌

6. Grab your Webflow API key

  • Click the Webflow button in the top left of the designer
  • Select “Project Settings”
  • Go to the Integrations tab
  • Scroll to the bottom and click “Generate new API token”
  • Copy that key and paste it into Whalesync

7. Map Airtable tables to Webflow collections

  • Using the dropdowns, map the tables in Airtable and collections in Webflow you want to sync

📌 If the names of the tables match exactly across Airtable and Webflow, Whalesync will auto-map them for you 📌

8. Map Airtable fields to Webflow fields

  • Similar to the last step, choose the individual fields you want to sync across Airtable and Webflow

📌 For a complete list of supported fields, see our docs 📌

9. Turn sync on

  • From the Whalesync dashboard, toggle sync on
  • Instantly see data start syncing in real-time

10. Check the Issues page for any errors

  • After setting up a sync, check to see if any records could not be synced
  • Once you resolve an error, it will disappear from the Issues page


Whalesync is the easiest way to connect Airtable and Webflow. You can set up a real-time, two-way sync between your favorite tools in a few minutes. Let us know if you have any questions at 🙂 or get started here.

Interactive Demo - Airtable to Webflow CMS

Matthew Busel

Matthew is the co-founder of Whalesync and author of the book Game Changer.

Want more?

Stay up to date with the latest no-code data news, strategies, and insights sent straight to your inbox!

Awesome! Excited to share our best tips and thoughts.
Oops! Something went wrong while submitting the form.
Simplified Backend
The no-code data tool for builders

We keep your data in sync, so you can focus on your product.

Bullet point in light blue with an even lighter blue circle around it

Simple setup

Bullet point in light blue with an even lighter blue circle around it

Two-way sync

Bullet point in light blue with an even lighter blue circle around it

No-code required