react-notion

react-notion lets you render Notion pages in your React sites, without the overhead. Use Notion as CMS for your blog, documentation or website.

Markdown was my go to tool for creating content – I used it for personal note taking as well as content source for the websites I built. This all changed when I discovered Notion. I fell in love with it's editor and how easy it was to structure content. It didn't take too long for me to switch all my personal and work related content over.

When Tobi and I started to work on the websites for Splitbee and PS Tunnel, we knew we wanted to have a blog. The idea of having Notion as a CMS sounded amazing to us. After some research we found a few of Notion + React proof of concepts, but nothing was really useable at this point.

That's how react-notion was born. A fast & lightweight React renderer for Notion content. You can use it to integrate Notion pages inside your React app. The text you are reading right now was rendered by react-notion.

⚡️ Fast – Up to 10x faster than Notion*

🎯 Accurate – Results are almost identical

🔮 Code Highlighting – Automatic code highlighting with prismjs

🎨 Custom Styles – Styles are easily adaptable. Optional styles included

* First Meaningful Paint compared to a hosted example on Vercel.

Code Example

import { NotionRenderer } from "react-notion";
import response from "./load-page-chunk-response.json";

const blockMap = response.recordMap.block;

export default () => (
  <article>
    <NotionRenderer blockMap={blockMap} />
  </article>
);

Getting data with Notion API Worker

Now that we got a solution for rendering Notion content, we still needed a way to get the content out of Notion. They have an official API on their road map, but who likes waiting. We built notion-api-worker to gain easy access to all of our Notion data.

The hosted API has two endpoints. One to get the page content, the other is to get structured data out of a table.