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
 

Complex Layouts

This is an
This is an image caption
Notion image
 
Notion image

Nesting works just fine.

It is also responsive.

 
 
Build software better, together
GitHub brings together the world's largest community of developers to discover, share, and build better software. From open source projects to private team repositories, we're your all-in-one platform for collaborative development.
Build software better, together
https://github.com
Build software better, together
 
💻
Code Snippet
 
const Example = () => (
  <div style={{ maxWidth: 768 }}>
    <NotionRenderer blockMap={blockMap} />
  </div>
);
 
 
 
📹
Video Embed
 
 
 
 
🖼️
Custom Content
 
 

GitHub