How to connect and sync Supabase to Webflow in 5 minutes with Whalesync

Supabase is a scalable, real-time Postgres backend, perfect  for powering apps and websites that need performance, reliability, and live data access. Webflow lets you design and launch stunning dynamic websites with no code required. Together, they give you the best of both worlds: dynamic content stored in your database, published through a beautifully designed Webflow frontend.

Whether you're building a marketplace, directory, or content-driven product, syncing Supabase to Webflow means your site always reflects the latest app data, without manual entry, CSV uploads, or custom code.

With Whalesync, you can sync data from Supabase directly to Webflow. 

Here’s how to get started in just five minutes.

Why should you connect Supabase to Webflow?

Connecting Supabase and Webflow CMS allows you to bridge the gap between a powerful backend and a no code frontend. By syncing Supabase and Webflow, you can display real-time data from your app, ensuring your content is always current.

When should you connect Supabase and Webflow?

Here are a two common scenarios where connecting the two makes sense:

• You’re building a listing site or marketplace: Your frontend needs to reflect data such as product availability, pricing etc from Supabase in real time. Syncing Supabase and Webflow with Whalesync is easier than  writing code or managing a complex build process just to get your backend data into Webflow.
• You want to power SEO landing pages using content from your database: Programmatic SEO relies on generating large volumes of structured content at scale. By syncing Supabase and Webflow, you can automate page creation and ensure each landing page always reflects the most current data from your database.

How to sync Supabase and Webflow

Here’s a step by step guide to sync Supabase and Webflow.

Step 1: Create a new sync

Log in to your Whalesync account and click ‘New sync’

Step 2: Authorize your apps

Select the apps you want to connect. In this case, it’s Supabase and Webflow. Then, authorize these two apps. Authorizing the apps enables Whalesync to have access to your app data in order to complete the syncs.

When you’re authorizing the apps, you need to select the Supabase project you want to sync the data from and the Webflow workspace you want the data to be synced to.

When you’re setting up any sync with Supabase, Whalesync automatically creates a dedicated database user, whalesync_service_account_[ID] to manage the sync. 

This dedicated user has the same permissions as your default postgres role. You’re always in control and can manage or delete this user anytime using standard Postgres commands.

Step 3: Map your tables

Choose the tables that you want to sync from Supabase to Webflow. You can add multiple table mappings to a sync and related fields. You can also create the tables you want to map from Whalesync’s user interface, making it much faster to get started with your syncing.

Step 4: Map your fields

You can choose how many fields you want to map, whether you want to map all of the fields or just a few.

You can also create fields here.

If you have existing data in your database, Whalesync will match the records according to the fields you mapped.

If you are starting from a new database that doesn’t have any data, once you start entering data into your database, the data will automatically sync to Webflow.

Step 5: Activate sync

The final step is to activate your sync! Before you activate your sync, you’ll see a preview that shows you how many records will be added to each tool.

Done! Supabase and Webflow is synced 🤝

Now it’s time to start adding to your Supabase database and view your data on your live Webflow site.

Start syncing today

Whether you're building a marketplace, scaling your SEO pages, or building a dynamic content platform, syncing Supabase and Webflow CMS gives you the best of both: a scalable backend and a stunning no code frontend, all updated in real time. 

You can also set up a two way sync between Supabase and Webflow, so updates sync automatically between tools.

Ready to connect Supabase and Webflow? Get syncing today