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

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

GitHub