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

• Use Notion as CMS for your Blog

• Notion Blog starter using Next.js

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.

Supported Features

List

This is an example quote.

Complex Layouts

 

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.

https://github.com

  
const Example = () => (
  <div style={{ maxWidth: 768 }}>
    <NotionRenderer blockMap={blockMap} />
  </div>
);

GitHub