Photo of DeepakNess DeepakNess

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.

Comment via email