A React renderer for Notion pages. Use Notion as CMS for your blog, documentation or personal site.
This packages doesn't handle the communication with the API.
⚡️ Fast – Up to 10x faster than Notion*
🎯 Precise – 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 ZEIT now.
npm install react-notionWe can store the API response in a .json file and import it.
import "react-notion/src/styles.css"; import "prismjs/themes/prism-tomorrow.css"; // only needed if you use Code Blocks import { NotionRenderer } from "react-notion"; import response from "./load-page-chunk-response.json"; // https://www.notion.so/api/v3/loadPageChunk const blockMap = response.recordMap.block; export default () => ( <div style={{ maxWidth: 768 }}> <NotionRenderer blockMap={blockMap} /> </div> );A working example can be found inside the example directory.
In this example we use Next.js for SSG. We use notionapi-agent to fetch data from the API.
To get your pageId, inspect network requests while visiting a public Notion page. It is included in the body of the POST /api/v3/loadPageChunk request.
/pages/my-post.jsx
import "react-notion/src/styles.css"; import "prismjs/themes/prism-tomorrow.css"; import { NotionRenderer } from "react-notion"; import { createAgent } from "notionapi-agent"; const agent = createAgent(); export async function getStaticProps() { const pageId = "2e22de6b-770e-4166-be30-1490f6ffd420"; // Your Notion Page ID const pageChunk = await agent.loadPageChunk({ pageId, limit: 999, chunkNumber: 0, cursor: { stack: [] }, verticalColumns: false }); return { props: { blockMap: pageChunk.recordMap.block } }; } export default ({ blockMap }) => ( <div style={{ maxWidth: 768 }}> <NotionRenderer blockMap={blockMap} /> </div> );List of pages that implement this library.
Most common block types are supported. We happily accept pull requests to add support for the missing blocks.
| Block Type | Supported | Notes |
|---|---|---|
| Text | ✅ Yes | |
| Heading | ✅ Yes | |
| Image | ✅ Yes | |
| Image Caption | ✅ Yes | |
| Bulleted List | ✅ Yes | |
| Numbered List | ✅ Yes | |
| Quote | ✅ Yes | |
| Callout | ✅ Yes | |
| Column | ✅ Yes | |
| iframe | ✅ Yes | |
| Video | ✅ Yes | Only embed videos |
| Divider | ✅ Yes | |
| Link | ✅ Yes | |
| Code | ✅ Yes | |
| Databases | ❌ Missing | |
| Checkbox | ❌ Missing | |
| Toggle List | ❌ Missing | |
| Web Bookmark | ❌ Missing |
- Tobias Lins – Idea, Code
- Timo Lins – Code, Documentation
- samwightt – Inspiration & API Typings