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.
Supported Features
List
- First Item
- Second Item
- Third Icon
- Sublist
- Item 1
- Nested
- Nested
- Item 2
- First Item
- Item 1
- Nested
- Nested
- Item 2
- Second Point
- Third Point
This is an example quote.
You can toggle this list
This is hidden content 🤫
Complex Layouts
![This is an](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fadac4e1e-1a94-4306-b41f-57f80b45f90d%2Froger-bradshaw-7o3uFw2xrAk-unsplash.jpg?table=block&id=08299481-b6aa-40d8-978c-1df557e2880c&cache=v2)
![Notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ffc4a23e4-7898-4afa-ac20-e7834097a605%2Fmarsumilae-Og4S8NW-p_I-unsplash.jpg?table=block&id=a1498ed5-6eb9-4191-b19a-d8290496e906&cache=v2)
![Notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd4b5070d-5e28-40bf-a4a5-2200e147aa84%2Fricardo-gomez-angel-geBHIpvA6us-unsplash.jpg?table=block&id=9d188b6d-ef94-4e23-be62-e9ae8252a009&cache=v2)
Nesting works just fine.
It is also responsive.
const Example = () => ( <div style={{ maxWidth: 768 }}> <NotionRenderer blockMap={blockMap} /> </div> );