How to Sync Airtable and Webflow (the Easy Way)

Illustration showing an Airtable record list syncing to a Webflow CMS collection

Connect Airtable base to your Webflow CMS in ten quick steps

1 min read
Feb 24, 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. Create your Sync

Whalesync's Syncs page with no syncs yet, with New sync highlighted

2. Select and Authorize your first app - Airtable

Airtable chosen from the app list as the first data source of a new sync
The Authorize Airtable dialog, with an Airtable base sharing link pasted in

4. Authorize your Airtable app

Airtable's authorization screen, where Whalesync requests access to a base, with Grant access highlighted

5. Save your connection

Airtable authorized as the first data source, with a base selected and Save connection highlighted

6. Select and Authorize your second app - Webflow

Webflow chosen from the app list as the second data source

7. Authorize with Webflow OAuth

Webflow's authorization screen for the Whalesync 2-Way Sync app, with a site selected and Authorize App highlighted

8. Save connection

Webflow authorized as the second data source, with a site selected and Save connection highlighted

Simple setup

Get started in minutes without an engineer.

9. Continue to table mapping

The Airtable × Webflow sync's setup checklist, with Add table mappings highlighted

10. Create your table mappings

Suggested table mappings between Airtable and Webflow — Authors, Blog Posts, and Categories — with Create Table Mapping highlighted

11. Map your fields

Mapping the Authors table, with Whalesync offering to automap five fields that share a name

12. Save and Exit

The Categories table's fields mapped between Airtable and Webflow, with Save and Exit highlighted

13. Start your Initial Sync!

The setup checklist with three tables mapped and Prepare initial sync highlighted

14. Scan your records

The initial sync's Scan existing records step, listing the three mapped tables, with Scan records highlighted

15. Match your records if needed

The Match records step, showing no existing records to match in any of the three tables

16. Check your sync preview

The initial sync preview, with three records to be added to each of Authors, Blog Posts, and Categories in Webflow

17. Activate your Sync

The Activate Sync dialog, noting that Airtable attachment file names may not be kept and that the Webflow site needs republishing, with Activate Sync highlighted

18. Congratulations! You are now syncing your Airtable and Webflow bases

Whalesync confirming the sync is now active and listening for changes

Airtable to Webflow CMS

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 hello@whalesync.com 🙂 or get started.

Subscribe for more

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

Keep reading

Related posts

Start syncing in minutes