A React renderer for Notion pages. Use Notion as CMS for your blog, documentation or personal site.


This page was rendered by react-notion & was developed by Splitbee. Splitbee is an easy to use analytics and conversion tool for any team.


Getting Started

Install the react-notion package using npm or yarn Check our repository to learn how to use react-notion


Tutorials & Starters



⚡️ 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.

Demo Content


All kind of text styling options are supported.

Compare this page to the original Notion page

Supported Features

Full width
Small Text


  • First Item
  • Second Item
  • Third Icon
  • Sublist
    • Item 1
      • Nested
      • Nested
    • Item 2
  1. First Item
    1. Item 1
      1. Nested
      2. Nested
    2. Item 2
  1. Second Point
  1. Third Point
This is an example quote.
You can toggle this list

Complex Layouts

This is an
This is an image caption
notion image
notion image

Nesting works just fine.

It is also responsive.



Code Snippet
const Example = () => (
  <div style={{ maxWidth: 768 }}>
    <NotionRenderer blockMap={blockMap} />
Video Embed
Custom Content