How To Fix Notion HTML Exporting
I’m a big fan of Notion. It’s a simple note-taking app that I used for a lot of my studies. It bypasses a lot of the frustrating styling issues that are common in Microsoft Word and other similar document applications. I’ll link below
I’m such a fan in fact, that it’s what I’m using to write this article. Don’t believe me? Get ready for one of the most meta screenshots of your life:
Anyway. There is one little known feature that I really like, and that’s the ability to export content directly to HTML.
This is how you are reading this article in native HTML right now. All thanks to this. For the most part, this feature works exactly as intended.
However, there are a couple issues with it that I’d like to point out. Let me introduce a simple file in Notion:
Doesn’t look too bad right? It’s comprised of three elements: a link to an Amazon product, a long block of (scrollable) code, and finally an embedded YouTube video. Pretty simple.
So when I export this to HTML, it should appear nearly identical to what you see up there right? Wrong:
Holy crap they butchered it. For anyone thinking: “That’s really not so bad…”. I present to you the mobile version:
Kill it with fire! It really is bad. I don’t know how this made it past testing on the Notion team.
Not to worry, I’m here to fix this. The fundamental issue with each offending element is as follows:
| Element | Issue | How to Fix it |
| Website Links | They don’t cutoff excessively long website titles or description text, leaving it to wander outside of the element | Cut if off after a certain number of characters |
| Code Snippets | Excessively long code snippet text doesn’t wrap around, instead requiring a user to scroll it. There is an option to enable wrap within Notion, but it isn’t the default | Enable wrap on code snippet elements |
| YouTube Links | Links to YouTube videos don’t show as an embedded ‘iframe’ elements like in the Notion app, but rather some lame boring clickable link | Actually embed an ‘iframe’ element into the resultant HTML page so the video can be playing WITHOUT going to YouTube.com |
There are probably other offending elements I don’t know about, these are just the ones I’ve dealt with personally.
So enough talk! Let’s fix it.
I’d love to write an article on how to identify each element in the raw HTML code and fix it by hand, but I’m a former software developer. That means I’ve already written a script to do it automatically:
F GitHub. Copy paste that file onto your system into the same directory as your messed up Notion HTML file and run it like so:
python notionexportfixer.py
And done. Let’s take a look at the ‘fixed’ HTML file in our browser:
So much better. That really wasn’t so difficult, what’s your excuse Notion?
There’s one other issue I have with Notion. On the ‘free’ plan, you are only able to upload 5MB worth of content in one file. When you go over that limit, you get this fun little warning:
A good seller for their paid plan. I don’t want to mess with Notion’s legal team, so I’ll tell you SHOULD buy their paid plan. Here’s what you SHOULDN’T do:
Once you hit the 5MB limit on a single document, you shouldn’t add a new small image/video file in your document as a placeholder for each additional image/video. Once you export this file to HTML, you shouldn’t then go into the resultant directory next to your HTML file containing all the image/video files and add in the ones you missed. You then shouldn’t go into the raw HTML and modify the links and dimensions of each placeholder image/video element to correspond to the appropriate file(s) you just added. If you have questions about any of this, then you shouldn’t reach out to me about it.
Anyway, that does it for this guide. Enjoy, and have a good day.