Sync Notion Pages with Webflow CMS

Community resources Show & Tell
1

Hey there,
I’m ybouane and I made SyncFlow, a Webflow-approved plugin that allows syncing a Notion Database with Webflow CMS. It allows you to write in Notion while designing in Webflow. The best of both worlds.

Here’s a demo of a page that was synced to Webflow CMS:

https://syncflow.ybouane.com/post/notion-webflow-sync-demo-post

And Here is the original notion database:

https://ybouane.notion.site/8b29106e53914c798c06b173e15f7dab?v=f6afc5d1423e47f48385d420f05b965a

All done automatically!

How to Sync Notion with Webflow?

  1. Visit SyncFlow Website: Go to SyncFlow’s website: https://syncflow.ybouane.com/ and click on ‘Get Started’.
  2. Grant Access: Approve and grant SyncFlow access to your Webflow sites.
  3. Account Setup: Sign up for a new account on SyncFlow or log in if you already have one.
  4. Connect to Webflow: In the Webflow designer, launch the SyncFlow app.
  5. Connect to Notion: In the SyncFlow app, click on ‘Connect Notion’ and choose the specific Notion page or folder you want to sync.
  6. Create Sync Task: Click on ‘Sync a new database’ in SyncFlow.
  7. Select Webflow Collection: Choose the Webflow collection you want to sync with your Notion database.
  8. Set Up Notion Database: Select an existing Notion database or create a new one. If new, SyncFlow will set up the fields.
  9. Adjust Sync Settings: Configure settings like ‘Auto-Publish’, ‘Auto-Sync’, code block highlights, and math expression rendering.
  10. Choose Styling Option: Select ‘Inline Styles’ for direct styling or ‘Use Classes’ for Webflow customization.
  11. Save Settings: Save your SyncFlow settings to establish the synchronization.
  12. Verify Sync: Add a new entry in Notion and check its sync status in the Webflow collection.
  13. Check Webflow CMS: After a few minutes, view the synchronized content in your Webflow CMS collection.
  14. Full Resync (Optional): Use the full-resync option in SyncFlow for existing databases to match the entire Webflow collection with the Notion database.

I hope this helps!

I personally don’t enjoy writing in the Webflow CMS very much and writing in Notion is a breeze especially with the new AI features, so this tool can be very useful to many!

1 Like
2

Hello, @ybouane

This is fascinating stuff! Currently, we employ different tools, however we face the following problems:

  • Synchronizing images in rich text fields (including left, right, and other synchronizing)

  • Video synchronization in rich text fields

  • In particular, we were unable to resolve the issue with Webflow’s new localization feature since new items would not be localized if you are syncing using Webflow’s API 1.0. Additionally, we were unable to resolve the issue with managing localizations in Notion and syncing them into Webflow.

Do you have a fix for this SyncFlow problem?

It pleases me to hear from you!

Warm regards, Philipp