
Security News
Browserslist-rs Gets Major Refactor, Cutting Binary Size by Over 1MB
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
react-notion-x
Advanced tools
Fast and accurate React renderer for Notion.
npm install react-notion-x
First you'll want to fetch the content for a Notion page:
import { NotionAPI } from 'notion-client'
const api = new NotionAPI()
// fetch the page's content, including all async blocks, collection queries, and signed urls
const recordMap = await api.getPage('067dd719a912471ea9a3ac10710e7fdf')
Once you have the data for a Notion page, you can render it:
import React from 'react'
import { NotionRenderer } from 'react-notion-x'
export default ExampleNotionPage({ recordMap }) => (
<NotionRenderer
recordMap={recordMap}
fullPage={true}
darkMode={false}
/>
)
You'll need to import some CSS styles as well. If you're using Next.js, we recommend you put these in pages/_app.js
:
// core styles shared by all of react-notion-x (required)
import 'react-notion-x/src/styles.css'
// used for code syntax highlighting (optional)
import 'prismjs/themes/prism-tomorrow.css'
// used for collection views (optional)
import 'rc-dropdown/assets/index.css'
// used for rendering equations (optional)
import 'katex/dist/katex.min.css'
MIT © Travis Fischer
Support my OSS work by following me on twitter
FAQs
Fast and accurate React renderer for Notion.
The npm package react-notion-x receives a total of 18,150 weekly downloads. As such, react-notion-x popularity was classified as popular.
We found that react-notion-x demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.
Security News
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.