react-notion
react-notion

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 https://github.com/splitbee/react-notion

 

Tutorials & Starters

 

Features

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

List

  • 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

This is hidden content 🤫

 

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} />
  </div>
);
 
 
 
📹
Video Embed
 
 
 
 
🖼️
Custom Content
 
 

GitHub