Like many of my projects, this one began as a thought experiment.
"Notion is so great... it has such smooth editing and content organization. Would it be possible to literally manage my blogs and other Webflow CMS content using Notion alone? I edit it, it publishes- just like that."
That question lead to some thinking and experimentation and a few hours later, I find myself typing this article directly in Notion, and every minute or two, I see it automatically update my live Webflow page.
That's kinda nuts. 🤔
I can even take a screenshot, and paste it into Notion, and see that publish too.
Like this one.
You're seeing right, this entire article was 100% written in Notion. I did not make a single edit in Webflow, and was able to achieve 100% of the content I wanted.
- It's fast. Notion is incredibly smooth and flexible in its content creation.
- It's powerful. I'm even able to do a few things using Notion that I simply can't do in Webflow. For example, taking a screenshot, and directly pasting that image data from the clipboard into my article. For documentation especially, that's a massive improvement to workflow performance.
- Excellent team support. Who do you want to be able to create or update articles in your Blog? You can choose all through Notion.
This is a new superpower, but what can it do and where are its limitations?
Content Control
| Webflow | Sygnal Notion Sync | |
| Paragraphs | ✅ YES | ✅ YES |
| Text Formatting | ✅ Bold, Italics, Underline, Code, Superscript, Subscript | ✅ Bold, Italics, Underline, Code, Strikethrough |
| Links | ✅ YES | ❓ Need to test, multiple possibilities |
| Blockquotes | ✅ YES, one paragraph only, no author | ✅ YES, one paragraph only, no author |
| Tables | ❌ no | ✅ YES, with easy editing |
| Emoticons | ❌ no | ✅ YES, use conventional : syntax to add emoticons anywhere |
| Colored Text | ❌ no | ⚠️ Supported in Notion, working on syncing this into Webflow |
| Images | ✅ Can present as Full width, Centered, Float Right and Float Left | ⚠️ Can present only full-width, considering some pre-tagging options |
| Adding Images | - Can upload directly. - Can paste HTML that contains an image tag, which will then be uploaded. | - Can upload directly. - Can paste HTML that contains an image tag, which will then be uploaded. - Can paste images and screen captures directly from the clipboard |
| Image Captions | ✅ YES | ❓ Testing |
| Code Blocks | ✅ YES, but no built-in copy code feature | ⚠️ Yes, but no syntax highlighting yet |
| AI Content Creation | ✅ YES | ✅ YES |
Publishing Controls
| Webflow | Sygnal Notion Sync | |
| Publishing Speed | ✅ Pretty much instantaneous, when you click Publish Now. | ✅ Automatic, but takes 1 to 2 minutes before the update occurs. |
| Draft Changes | ✅ YES, make changes that are not published immediately | ❌ no |
| Unpublish | ✅ YES | ✅ YES. Change the status of the article to In progress |
Examples
This entire article is published via Sygnal Notion Sync. Here you can see some specific examples of Notion Sync capabilities.
Paragraphs
Blockquotes
- Unordered lists
- Ordered lists
Text formatting bold, italics, strikethrough , underline, code
Images, including paste-directly from the clipboard images
Dividers ( hr )
Simple, preformatted code blocks
like this one, no syntax-highlighting yet Simple tables
| Heading 1 | Heading 2 | Heading 3 |
| Row 1 data | Row 1 data | Row 1 data |
| Row 2 data | Row 2 data | Row 2 data |
Automatic Heading Shift
Allow adjustment of heading levels, e.g. H1 in Notion becomes H2 in Webflow. This maximizes ease of use in Notion, while ensuring styling and semantic SEO consistency in Webflow.
Publishing Process
Everything is pre-setup in the environment to publish from a specific Notion DB to a specific Webflow Collection.
- Create the article in Notion
- Complete the article
- Use the Status to track the state of the article - Idea, in-progress, published, etc.
- When you place it as published, it is published live in the CMS. Use Notion's Board view to make drag and drop state changes quickly.
Remember, any change can take 1 to 2 minutes to update. Notion does not send changes instantaneously for each character you type, and some changes require processing such as image uploads, HTML conversion, and so on by our middle-tier solution.
Best Practices
Table Styling
HTML Tables are not automatically styled in Webflow. Add an embed with your table styling, and you can isolate it to rich text elements if you prefer.
Limitations
Working on
- Table formatting control
- Nested lists
- Text coloring by word
- Code blocks with better styling ( not just
) - Images
Setup
- Notion is used as the source of truth ( SSoT )
- Changes in specific Notion databases are published by webhook to a Cloudflare worker I have running
- That worker disassembles, and makes the necessary webflow API calls
Key Learnings So Far
- Always remove line breaks in HTML before updating Webflow richtext fields in the API. If you do not, lists and other structures will break.
- Publishing rules;
- use
/liveto publish and unpublish
Research & Development
Draft Changes
Some means to allow changes without publishing, and then release them all at once.
Buttons exist as a Database item field type in notion, along with a Send webhook capability. Using this, we could deliver regular updates as Saved Changes, and then use the secondary webhook to Publish Now.
Blockquotes w/ Citations
Footnotes
Lists-in-Tables
Automatically format cell content beginning with - or * as list items, using line breaks to distinguish.
Image optimization, e.g. AVIF
Code Blocks
With syntax highlighting
Bugfix - remove the scrollbar from the current preformatted blocks
Embeds
Nested Lists
- Level 1
Table Styling
Identify header rows or columns.
Possibly sortable columns
Consider special rules, in the form of a paragraph lead with :: and specific syntax
:: table headerrow=1 headercol=1 height=x scroll=y | Heading 1 | Heading 2 | Heading 3 |
| Row 1 data | Row 1 data | Row 1 data |
| Row 2 data | Row 2 data | Row 2 data |
Code Components
Conceptual
Callouts
To Do Lists
Oddly sort of works but of course doesn't do anything.
Video
- Player auto-gen for external URLs
Audio
- e.g. Soundcloud embeds
Toggle Lists
Accordion / expando
Column Layouts
Objects, like Excalidraw
Raw HTML / JS insertion
Currently a raw HTML like this span will automatically be rendered through into the CMS.
Currently seeing some problems with single and double quotes.
CMS Sanitization
Understand and mitigate the impacts.
Stylized Quotes
Notion automatically converts single and double-quotes to stylized angled versions. This could be useful, except when we want raw HTML.
Experimenting, currently...
- Converts smart/curly quotes (
''"") to straight quotes ('") - Converts ellipsis (
...) to three dots (...) - Converts en-dash (
-) to hyphen () - Converts em-dash (
--) to double hyphen (-) - Converts non-breaking spaces to regular spaces
Bi-directional sync
Ability to do an initial push for a CMS item into a Notion DB, from there the Notion DB owns it
Unpublished Sections
Some means to have in-progress content within the Notion doc, which is not published to production.
Staging-only Preview
- Queue-to-publish an item
- Publish full site to staging
- ? Change item back to Draft
Systems Planning
The webhooks are designed to specify a configuration profile;
https://api.mysite.com/v1/notion/webhook/:configFor example;
https://api.mysite.com/v1/notion/webhook/blogWhen calls are made to this webhook endpoint, the profile blog is then retrieved from the KV store, which identifies;
- What Collection we're updating
- Specific field mappings
This is how we tie a specific CMS collection to a specific notion database, through a specific webhook.
Configuration
- Notion API key stored in cloudflare secrets for the worker
- Webflow API key stored in cloudflare secrets for the worker
In general a given deployment will be for a single Webflow site but may have many Notion Db's
