Tutorial
Notion to Webflow: How to Manage Content Without the CMS Editor
Your team already writes in Notion. Here is how to get that content onto your Webflow site without copy-pasting.
Most content teams do not write in Webflow. They write in Notion — or Google Docs, or Airtable, or a shared spreadsheet. The Webflow CMS editor is fine for making small changes to live content, but it is not where anyone wants to draft, review, and collaborate on new content. It lacks comments, real-time collaboration, flexible views, and the editing experience that content tools are built around.
The result is a manual workflow: write in Notion, copy to Webflow, format it again, publish. Every piece of content gets handled twice. Every update requires someone to log into the Webflow editor. This guide covers how to eliminate that double-handling by using Notion as your content source and syncing it to Webflow automatically.
Why Content Teams Prefer Notion
Notion is not a CMS. It is a workspace tool that happens to be very good at structured content. The features that make it popular with content teams are exactly the features that Webflow's CMS editor lacks:
- Real-time collaboration — multiple people can edit the same page simultaneously, leave comments, and mention teammates. Webflow's editor is single-user.
- Database views — the same content can be viewed as a table, board, calendar, gallery, or list. A content calendar view showing publish dates alongside a board view showing editorial status is natural in Notion. In Webflow, you get a flat list.
- Templates — Notion database templates let you create new items with pre-filled structure. A "Blog Post" template can include sections for outline, draft, review notes, and SEO metadata. New posts start with structure, not a blank page.
- Permissions — share a database with guest editors, freelancers, or clients without giving them access to your entire workspace. Webflow's permissions are tied to the site, not the content.
- Familiarity — your team already uses Notion. There is no training cost. The alternative is teaching every content contributor how to use the Webflow editor, which is a design tool disguised as a content tool.
The Sync Gap
Notion has no native Webflow integration. There is no "Publish to Webflow" button, no official connector, no export format that Webflow can import directly.
The options without a dedicated sync tool are limited:
- Copy and paste — manually copy content from Notion to Webflow for each piece. Works for three blog posts. Breaks down at thirty.
- CSV export/import — export a Notion database as CSV, clean up the data, import into Webflow. One-directional and manual. Does not handle images, rich text formatting, or references.
- Zapier or Make — connect Notion's API to Webflow's API via an automation tool. This can work for simple content (title, plain text description, date) but struggles with rich text, images, and relational data. Each field mapping is a separate configuration step, and debugging failed syncs requires API knowledge.
All three approaches share the same problem: they treat the sync as a one-time transfer rather than an ongoing connection. When someone updates a post in Notion, that update does not reach Webflow without manual intervention.
How Notion Databases Map to Webflow CMS
Notion databases and Webflow CMS collections are structurally similar. Both store structured content with typed properties (fields). The mapping is largely intuitive:
- Notion Database → Webflow CMS Collection
- Notion Property (Title) → Webflow Name Field
- Notion Property (Text) → Webflow Plain Text
- Notion Property (Rich Text) → Webflow Rich Text
- Notion Property (Number) → Webflow Number
- Notion Property (Select) → Webflow Option
- Notion Property (Multi-Select) → Webflow Option or Multi-Reference
- Notion Property (Date) → Webflow Date/Time
- Notion Property (Checkbox) → Webflow Switch
- Notion Property (URL) → Webflow Link
- Notion Property (Files & Media) → Webflow Image
- Notion Property (Relation) → Webflow Reference or Multi-Reference
The mapping is not always one-to-one. Notion's Multi-Select, for instance, stores multiple string values on a single property. Webflow has no equivalent single field — you either flatten it to a comma-separated plain text field (losing filterability) or create a separate collection and use Multi-Reference (preserving filterability but adding complexity). Trellis handles this decision for you based on how the data is used on the site.
For a detailed reference on the Notion connector and its field mapping capabilities, see the Notion connector documentation.
What Syncs and What Does Not
This is the most important section to read before you commit to a Notion-to-Webflow workflow. Not everything in Notion translates to Webflow CMS.
What syncs well
- Database properties — Title, text, number, select, multi-select, date, checkbox, URL, email, phone, files. These are the structured fields on each database item. They map cleanly to Webflow CMS fields.
- Cover images — the cover image on a Notion page can be synced to an Image field in Webflow.
- Relations between databases — if your Notion "Blog Posts" database has a Relation to an "Authors" database, Trellis can map that to a Reference field in Webflow, preserving the connection.
- Status and lifecycle fields — use a Notion Select property for content status (Draft / In Review / Published). Trellis can use this to control whether an item is published or drafted in Webflow.
What does not sync
- Page body content (blocks) — this is the big one. The content inside a Notion page — headings, paragraphs, images, toggles, callouts, embedded databases — does not map to a single Rich Text field in Webflow. Notion's block structure is far richer than Webflow's Rich Text field supports. A Notion page with callout blocks, toggle lists, and synced databases cannot be faithfully represented in a Webflow Rich Text field.
- Inline databases and embeds — Notion pages can contain inline databases, embedded Figma files, and other interactive content. None of this has a Webflow CMS equivalent.
- Comments and page history — collaboration metadata stays in Notion. Webflow has no equivalent.
- Formulas and rollups — computed properties in Notion are read-only values derived from other data. They can be synced as plain values (the result of the formula, not the formula itself), but they will not update dynamically in Webflow.
The practical implication: Notion works best as a Webflow content source when your content is structured as database properties rather than long-form page content. Blog metadata (title, excerpt, author, category, publish date, featured image) syncs perfectly. The blog post body, if written as a Notion page with rich block content, does not translate cleanly.
For long-form content, the best approach is to write the body in Notion, then paste it into Webflow's Rich Text editor for final formatting. Let Trellis handle the structured fields (metadata, references, images, status) and handle body content manually or via a simplified plain-to-rich-text sync.
Setting It Up Step by Step
Here is the workflow for connecting Notion to Webflow through Trellis:
Step 1: Prepare your Notion database
Make sure your Notion database has clear, consistent property names. Each property should map to one Webflow CMS field. Remove or hide properties that are internal-only (meeting notes, draft comments) and should not reach the live site.
Add a Status property (Select type) with values like "Draft," "In Review," and "Published." Trellis uses this to determine which items should be live on the Webflow site and which should remain drafted.
Step 2: Connect Notion in Trellis
In the Trellis dashboard, add Notion as a source connector. You will authorize Trellis to access your Notion workspace via OAuth. Select the specific databases you want to sync — Trellis does not access anything you do not explicitly share.
Step 3: Map fields
Trellis reads your Notion database schema and your Webflow CMS collection schema, then suggests field mappings. Title maps to Name. Your "Author" Relation maps to the Author Reference field. Your "Category" Multi-Select maps to a Categories Multi-Reference. Review the mappings, adjust any that need tweaking, and confirm.
Step 4: Set sync rules
Choose how often to sync (on-demand, every 15 minutes, every hour) and how to handle conflicts. Typically, Notion is the source of truth — changes in Notion overwrite Webflow, not the other way around. Set the Status property mapping so that only "Published" items go live.
Step 5: Run the first sync
Trigger an initial sync. Trellis pulls all "Published" items from your Notion database, transforms the data according to your field mappings, and creates corresponding CMS items in Webflow. Check the results in the Webflow editor to verify everything looks right.
Step 6: Ongoing workflow
From now on, your content team works in Notion. When a post is ready, they set its Status to "Published." On the next sync cycle, Trellis picks it up and publishes it to Webflow. Updates to existing items are synced automatically. Deleted or "Archived" items can be unpublished or removed from Webflow based on your sync rules.
Choosing Your Content Source Strategy
Notion is one option for managing content outside of Webflow. Airtable, Google Sheets, and other tools each have their own strengths. The right choice depends on how your team works:
- Notion — best for teams that already use Notion for project management and documentation. Rich editing experience, great for content that benefits from flexible views and templates.
- Airtable — best for teams that need advanced data management: formulas, automations, Gantt views, or integration with other data workflows. Stronger for structured data than long-form content.
- Google Sheets — best for teams with simple content needs and no existing Notion or Airtable setup. Lowest learning curve, but least powerful for content management.
Trellis supports all three as source connectors. You choose the tool that fits your team, and Trellis handles the connection to Webflow. For a deeper comparison, see the content source strategy guide.
Common Pitfalls
Treating Notion pages as CMS items
A Notion page and a Webflow CMS item are not the same thing. A Notion page can contain anything — databases, toggles, callouts, embedded files. A Webflow CMS item is a fixed set of typed fields. The sync works at the property (field) level, not the page content level. If your content strategy relies on complex Notion page layouts, Webflow CMS is not the right rendering target for that content.
Syncing too many properties
Not every Notion property needs to reach Webflow. Internal notes, editorial status history, and team assignments are useful in Notion but irrelevant in CMS. Only map properties that affect the published site. Fewer fields means faster syncs and a cleaner CMS editing experience.
Ignoring the Notion API rate limit
The Notion API is rate-limited to about 3 requests per second. For databases with hundreds of items, initial sync takes time. Trellis handles rate limiting automatically, but be aware that very large databases (1,000+ items) may take several minutes to sync fully.
Making It Work
The Notion-to-Webflow workflow is strongest when you treat Notion as the content layer and Webflow as the presentation layer. Notion handles writing, reviewing, and organizing. Webflow handles design, layout, and publishing. Trellis is the bridge.
The workflow is not perfect — page body content remains a manual step, and some Notion features have no Webflow equivalent. But for teams that already live in Notion, it eliminates the most tedious part of maintaining a Webflow site: keeping the CMS in sync with the content your team actually produces.