Notion Blog Post Content Synchronizer for Webflow CMS - n8n Workflow

Content Managers who use Notion as their primary drafting environment but publish on Webflow.
Developers needing robust data synchronization between Notion and Webflow.
Users looking for advanced examples of n8n templates involving custom HTML generation.
Anyone needing an automated, scheduled content n8n workflow solution.

This robust n8n workflow solves the common challenge of migrating complex, rich text content between Notion and Webflow without manual copying and pasting. It uses a scheduled n8n trigger to poll your Notion blog database. Posts marked for synchronization are automatically processed. A key component of this n8n workflow is the embedded custom code that meticulously converts Notion blocks (like headers, paragraphs, lists, and images) into Webflow-compatible HTML. Furthermore, the workflow handles both creation (if the post is new) and updating (upsert operation) by comparing the unique slug properties between the two platforms, ensuring your Webflow CMS stays perfectly synchronized with your Notion database. This comprehensive n8n solution is essential for streamlined content operations.

1. Trigger and Fetch: The n8n workflow starts with a Schedule Trigger n8n node, running periodically to check for updates. It retrieves all posts from the specified Notion blog database.


2. Filtering and Deduping: An n8n node filters the posts, retaining only those where the "Sync to Webflow?" checkbox is marked. A Code n8n node then ensures that every post has a unique slug, automatically adjusting duplicates if necessary.


3. Page Data Extraction: For each post, subsequent Notion n8n node steps retrieve simple page data, full page data, and a Set n8n node extracts the cover image URL.


4. Rich Text Conversion (Custom Code): This technical step involves using a Notion Get Blocks n8n node followed by two custom Code n8n nodes. The first Code n8n node converts individual Notion blocks into raw HTML fragments (handling bold, italics, links, images, quotes, and code blocks). The second Code n8n node intelligently wraps consecutive bulleted or numbered list items into proper
   or
   structures, generating the final newRichText HTML payload required by Webflow.
   
   1. Comparison: The workflow fetches all existing items from the Webflow collection. A Compare Datasets n8n node then compares the incoming Notion post against existing Webflow posts using the unique slug property.
   
   
   2. Upsert Logic: If the post is new (A Only), the Create Item Webflow n8n node is executed. If the post exists (Different), the flow updates the item via the Update Item Webflow n8n node. Both paths conclude by updating the Notion page with the guaranteed unique slug for reference.
   
   
   3. Notification: Finally, a Slack n8n node sends a success message, confirming that the synchronization of the current item is complete. This entire flow is a perfect example of an advanced n8n workflow designed for content management.
   
   

1. Import: Import this n8n workflow JSON into your n8n instance.


2. Credentials: Connect your Notion API and Webflow OAuth2 accounts. Ensure your Slack credentials are also set up if you intend to use the success notification.


3. Notion Setup: Ensure your Notion database includes two specific properties required by this n8n template:

1. Configuration: Update the Notion database ID (Get all blog posts1) and the Webflow Site ID and Collection ID (Get all collection posts1, Create post1, Update in "Blog Posts").


2. Test Run: Run the n8n workflow once manually to ensure all dynamic field mappings (especially within the Webflow n8n node configurations for the collection fields) are correctly populated with data from Notion.


3. Activation: Once tested successfully, activate the Schedule Trigger n8n node to begin automated synchronization.

Schedule Trigger: The primary n8n trigger that initiates the entire synchronization process on a recurring basis.
Notion Node (Get All Blog Posts): Fetches records from the configured Notion database. Key configuration: Operation: getAll.
Filter Node (Is sync checked?1): Core logic n8n node that filters records based on the propertysyncto_webflow checkbox being true.
Code Node (Slug uniqueness checker and differentiator1): Custom n8n node script that checks for and resolves duplicate slugs by appending numerical suffixes, ensuring Webflow constraints are met.
Notion Node (Get blocks1): Retrieves the structural content blocks for the specified page, critical input for the custom HTML conversion.
Code Node (Turn blocks into HTML1): A sophisticated n8n node containing custom JavaScript to map Notion block types (H1, P, List Item, Image, Code) to their corresponding HTML tags.
Code Node (Craft the rich text element1): Custom n8n node logic to combine consecutive list items into proper

and
containers, crucial for clean rich text output in Webflow.
Webflow Node (Get all collection posts1): Retrieves existing Webflow items to enable the comparison logic. Key configuration: Operation: getAll.
Compare Datasets Node (Compare by slug1): This vital n8n node determines if the operation should be a Create (A only) or an Update (Different) based on matching slugs, driving the upsert logic in this n8n workflow.
Webflow Node (Create post1 / Update in "Blog Posts"): These n8n node steps execute the final API calls to the Webflow CMS, completing the synchronization process defined in this powerful n8n workflow. The 'Update in "Blog Posts"' n8n node requires the Webflow Item ID determined during the comparison phase.


• Slack Node (Success message1): Sends a completion notification, providing valuable feedback on the execution of the n8n workflow.