SyncFlow

How to build with SyncFlow and Webflow

SyncFlow syncs Notion databases with Webflow CMS collections, eliminating manual content transfer. Teams write in Notion while SyncFlow automatically publishes to Webflow, preserving inline styling, CSS classes, code highlighting, TeX expressions, and internal page links. This requires a Webflow CMS plan.

Get started with the SyncFlow marketplace app for no-code setup, or build custom integrations with Webflow's API for full technical control over sync logic and workflow customization.

Use the SyncFlow app

The SyncFlow marketplace app connects your Notion databases to Webflow CMS collections through a visual interface. You map Notion properties to Webflow fields using drag-and-drop, then choose between automatic or manual syncing.

The app keeps inline styling, CSS classes, code highlighting, and TeX expressions intact while converting Notion page links to corresponding Webflow post URLs. SyncFlow provides one-way synchronization from Notion to Webflow only and requires a Webflow CMS plan to function.

Install the app from the Webflow Marketplace, authorize both platforms via OAuth, and configure field mappings in 3 steps. The setup documentation walks through account connection and sync activation. For blog-specific workflows, the blog publishing guide shows how to manage editorial calendars in Notion.

The SyncFlow app includes these capabilities:

• Automated synchronization: Choose between automatic or manual sync modes
• Field mapping: Visual drag-and-drop interface to connect Notion properties with Webflow CMS fields
• Format retention: Maintains inline styling, CSS classes, code highlighting, and TeX notation
• Link conversion: Automatically transforms Notion page links to Webflow post URLs
• Supported field types: Text, rich text, images, checkboxes, dates, and URLs

Build custom integrations with Webflow's API

SyncFlow doesn't provide public API endpoints or webhook events. For teams needing custom Notion-Webflow integration logic beyond SyncFlow's capabilities, build directly against the Webflow official REST API v2. This approach gives you complete control over sync logic, error handling, and workflow customization, but requires custom development work.

This approach makes sense when you need to integrate additional data sources beyond Notion or require complex publishing workflows with staging and approval gates. The Webflow CMS API reference documents all available operations for managing collection items programmatically.

For developers building custom Webflow integrations, you'll need OAuth credentials with sites:read, sites:write, cms:read, and cms:write scopes. The authentication documentation explains how to obtain and refresh access tokens securely.

These are the core implementation endpoints:

• Create collection items with POST /collections/{collection_id}/items
• Update existing items using PATCH /collections/{collection_id}/items/{item_id} when content changes
• Delete items through DELETE /collections/{collection_id}/items/{item_id} when removing content
• Publish sites via POST /sites/{site_id}/publish after content updates (limited to 1 publish per minute)
• List collection items with GET /collections/{collection_id}/items to check existing content before syncing

Webflow webhooks for custom integrations

The Webflow CMS API lets you react to CMS changes in real time through Webflow's native webhook infrastructure. Subscribe to events like collection_item_created, collection_item_changed, or collection_item_deleted by creating webhook subscriptions through POST /sites/{site_id}/webhooks. SyncFlow itself does not provide webhook events—it operates exclusively as a UI-based integration tool.

Webhooks deliver JSON payloads to your endpoint with HMAC-SHA256 signatures in the x-webflow-signature header. The webhook signatures documentation explains how to validate requests and prevent spoofing. The Webflow-Examples repository includes production code for handling webhook events.

Set up automations to trigger external processes after Webflow content updates, maintain search indexes, or sync data to analytics platforms using Webflow's native webhook infrastructure or third-party automation platforms like n8n, Zapier, or Make.

Transform Notion blocks to Webflow HTML

To build custom Notion-to-Webflow synchronization tools, developers must account for platform-specific constraints. Notion's API returns content as blocks with a 100-block-per-request pagination limit. Webflow expects flat HTML strings in rich text fields, so you need to fetch Notion blocks, parse nested structures like headings and lists, reconstruct formatting, and emit Webflow-compatible HTML tags.

The Notion database sync guide from Webflow explains this transformation process in detail, covering pagination handling and code block syntax highlighting. For multi-channel content delivery options, see the CMS content delivery guide.

What you can build

Integrating SyncFlow with Webflow enables content teams to write in Notion and have their content automatically published to designed Webflow sites.

• Technical documentation sites: Engineers write API references, tutorials, and guides in Notion with code highlighting and TeX notation. SyncFlow syncs content to Webflow CMS collections for design and publishing. Requires a Webflow CMS plan.
• Multi-author blog platforms: Multiple writers draft posts in shared Notion databases with editorial calendars. SyncFlow automatically syncs finished articles to Webflow while preserving formatting and author attributions.
• Product catalog pages: Manage product information in Notion databases with descriptions, specifications, and images. SyncFlow syncs to Webflow collection pages with a consistent design across listings.
• Knowledge base portals: Support teams write help articles in Notion databases while automatically syncing to searchable Webflow CMS collections with category organization and internal linking.