Your Content Updates Automatically. Here's How.

You manage your business in Airtable. Products, customers, inventory, projects—it's all there.

But your website is separate. Every time you update something in Airtable, you have to manually update it on your website.

That's duplicate work. And it creates delays.

What if your website could pull data directly from Airtable? The moment you update a product in Airtable, your website updates automatically.

That's automation. And it's easier than you think.

Why Airtable + Webflow?

Airtable is great for managing data. Webflow is great for displaying it beautifully.

Together, they're powerful:

• Single source of truth: Update data once in Airtable. Your website reflects it automatically.
• Less manual work: No more copy-pasting between systems
• Real-time updates: Your website always shows current information
• Less expensive: You don't need a custom developer or expensive CMS

How It Works

The basic flow:

1. Data lives in Airtable (products, prices, images, descriptions)
3. Webflow fetches that data via API
5. Webflow displays it on your website
7. When you update Airtable, Webflow automatically shows the new data

Example: An online course directory

1. You manage courses in Airtable (course name, description, price, instructor, image)
3. Webflow displays all courses on a "Browse Courses" page
5. When you add a new course to Airtable, it automatically appears on the website

Setting It Up: Step by Step

Step 1: Prepare Your Airtable

Create an Airtable base with the data you want to display:

• Table name: "Products" (or whatever you're displaying)
• Fields: Name, Description, Price, Image URL, Category
• Add sample data (at least 3 rows)

Important: Make sure your Airtable base is set to "Unrestricted" access in share settings. Webflow needs to read it.

Step 2: Get Your Airtable API Key and Base ID

1. Go to airtable.com and log in
3. Click your profile icon → Account
5. Find "API" and click "Generate API key"
7. Copy your API key (keep this secret—it's like a password)
9. Go to your base and find the Base ID in the URL (airtable.com/appXXXXXXX... — the appXXXXXXX part is your Base ID)

Step 3: Fetch Data in Webflow with Custom Code

You'll need to add custom code to your Webflow page.

In Webflow, go to page settings → Custom Code → Footer Code:

const airtableKey = 'YOUR_API_KEY';
const baseId = 'YOUR_BASE_ID';
const tableName = 'Products';
const url = `https://api.airtable.com/v0/${baseId}/${tableName}`;

fetch(url, {
headers: { 'Authorization': `Bearer ${airtableKey}` }
})
.then(response => response.json())
.then(data => {
const records = data.records;
records.forEach(record => {
console.log(record.fields);
});
})
;

This fetches your data. The next step is displaying it.

Step 4: Display the Data on Your Page

You have two options:

Option A: Use a Webflow plugin

Search for "Airtable" in the Webflow App Store. Several apps sync Airtable directly into Webflow CMS. This is easiest if you're not comfortable coding.

Option B: Use Zapier (No coding required)

Use Zapier as the middleman:

1. When a record is created/updated in Airtable...
3. Automatically create/update an item in your Webflow CMS

Now your Webflow CMS is always in sync with Airtable, and you display content from your CMS (not directly from Airtable).

This is more reliable and you maintain full design control in Webflow.

Real-World Example: A Product Catalog

Airtable: You have a "Products" table with these fields:

• Product Name
• Price
• Description
• Image
• Stock Level

Webflow: You display products on a page.

Setup: Use Zapier to sync Airtable to Webflow CMS. Every time you add/update a product in Airtable, Zapier creates/updates it in your CMS.

Result: Your website automatically displays the latest products.

When stock hits 0, you mark the product as "out of stock" in Airtable. Your website automatically shows "Out of Stock."

Benefits You Get

• No manual updates: You manage data in one place. Everything else syncs automatically
• Real-time accuracy: Your website always reflects the current data
• Scalable: Works with 10 items or 10,000 items
• Cheap: No expensive custom development
• Flexible: You can change your website design without affecting data flow

Important Limitations

• Two-way sync: Data flows from Airtable to Webflow, but not back. If you update something on your website, it doesn't update Airtable.
• Slight delays: When you update Airtable, it takes a few seconds to a few minutes to show on your website
• API limits: Airtable has rate limits (5 requests per second). For most sites, this isn't an issue

What You Can Automate

• Product catalogs
• Team member directories
• Event listings
• Job postings
• Pricing tables
• Testimonials
• Anything that changes regularly and has a structure

When NOT to Use Airtable + Webflow

• Your data changes every second (e.g., live stock prices)
• You need two-way sync (website updates feed back to Airtable)
• You have thousands of simultaneous users
• You need highly complex filtering and sorting

For these cases, consider a custom database or a dedicated web app.

The Bottom Line

Stop managing your data in two places. Use Airtable as your database. Use Webflow to display it beautifully.

Set up the automation once. Then update data in Airtable and watch your website update automatically.

That's the power of automation.