Create Notion-like HTML Pages

Recently, I discovered mvoloskov’s potion project on Github and decided to give it a try. It turned out to be cool. mvoloskov’s potion is basically a CSS file that makes your HTML pages look much like a Notion public page — that header image, icon, and everything.

I created a sample Lorem Ipsum page to test it out and here’s how it looks:

notion-like-html-page
See the live page or the Github repository

Much like Notion, right?

For this to work, you just have to add the following line in the <head></head> section of your .html file.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mvoloskov/potion/potion.min.css">

That’s it.

Now if you open the .html in the browser, it will look like a Notion page. For more customization options, look at the Github repo.

If you get stuck somewhere, let me know in the comments below.

Subscribe for updates

Get unfiltered access to interesting SEO & content marketing insights, case studies, and other cool findings that I don’t share anywhere else.

    I hate writing emails, so I only email once in a while.