{"id":13475061,"url":"https://github.com/splitbee/react-notion","last_synced_at":"2025-05-13T00:09:50.529Z","repository":{"id":38348521,"uuid":"255569926","full_name":"splitbee/react-notion","owner":"splitbee","description":"A fast React renderer for Notion pages ","archived":false,"fork":false,"pushed_at":"2024-10-28T07:44:29.000Z","size":587,"stargazers_count":2954,"open_issues_count":39,"forks_count":161,"subscribers_count":27,"default_branch":"master","last_synced_at":"2025-05-12T09:11:49.891Z","etag":null,"topics":["headless-cms","notion","react"],"latest_commit_sha":null,"homepage":"https://react-notion.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/splitbee.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-14T09:46:16.000Z","updated_at":"2025-05-11T18:57:55.000Z","dependencies_parsed_at":"2024-10-28T08:48:38.078Z","dependency_job_id":"211c4db6-25fb-4692-bb72-5ef47df5625b","html_url":"https://github.com/splitbee/react-notion","commit_stats":{"total_commits":146,"total_committers":19,"mean_commits":7.684210526315789,"dds":0.595890410958904,"last_synced_commit":"2e3f8e2322f7d7dff66f3a6a73264f0647cb9f3a"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/splitbee%2Freact-notion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/splitbee%2Freact-notion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/splitbee%2Freact-notion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/splitbee%2Freact-notion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/splitbee","download_url":"https://codeload.github.com/splitbee/react-notion/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253708928,"owners_count":21951070,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["headless-cms","notion","react"],"created_at":"2024-07-31T16:01:17.044Z","updated_at":"2025-05-13T00:09:50.492Z","avatar_url":"https://github.com/splitbee.png","language":"TypeScript","readme":"![react-notion](https://user-images.githubusercontent.com/1440854/79684011-6c948280-822e-11ea-9e23-1644903796fb.png)\n\n![npm version](https://badgen.net/npm/v/react-notion) ![npm version](https://badgen.net/david/dep/splitbee/react-notion) ![minzipped sized](https://badgen.net/bundlephobia/minzip/react-notion)\n\nA React renderer for Notion pages.\nUse Notion as CMS for your blog, documentation or personal site.\n\n**`react-notion` was developed by \u003ca href=\"http://splitbee.io/\"\u003eSplitbee\u003c/a\u003e. Splitbee is a fast, reliable, free, and modern analytics for any team.**\n\n_This package doesn't handle the communication with the API. Check out [notion-api-worker](https://github.com/splitbee/notion-api-worker) for an easy solution_.\n\n\u003csub\u003eCreated by \u003ca href=\"https://twitter.com/timolins\"\u003eTimo Lins\u003c/a\u003e \u0026 \u003ca href=\"https://twitter.com/linstobias\"\u003eTobias Lins\u003c/a\u003e with the help of all \u003ca href=\"https://github.com/splitbee/react-notion/graphs/contributors\"\u003econtributors\u003c/a\u003e ❤️\u003c/sub\u003e\n\n\n\n## Features\n\n⚡️ **Fast** – Up to 10x faster than Notion\\*\n\n🎯 **Accurate** – Results are _almost_ identical\n\n🔮 **Code Highlighting** – Automatic code highlighting with [prismjs](https://prismjs.com/)\n\n🎨 **Custom Styles** – Styles are easily adaptable. Optional styles included\n\n_\\* First Meaningful Paint compared to a [hosted example](http://react-notion-example.now.sh/) on [Vercel](https://vercel.com)._\n\n\n**react-notion** is best suited as minimal renderer for blogs \u0026 content pages. If you're looking for a full-featured solution to render Notion-like pages, check out [react-notion-x](https://github.com/NotionX/react-notion-x).\n\n\n## Install\n\n```bash\nnpm install react-notion\n```\n\n## How to use\n\n### Minimal Example\n\nWe can store the API response in a `.json` file and import it.\n\n```js\nimport \"react-notion/src/styles.css\";\nimport \"prismjs/themes/prism-tomorrow.css\"; // only needed for code highlighting\nimport { NotionRenderer } from \"react-notion\";\n\nimport response from \"./load-page-chunk-response.json\"; // https://www.notion.so/api/v3/loadPageChunk\n\nconst blockMap = response.recordMap.block;\n\nexport default () =\u003e (\n  \u003cdiv style={{ maxWidth: 768 }}\u003e\n    \u003cNotionRenderer blockMap={blockMap} /\u003e\n  \u003c/div\u003e\n);\n```\n\nA working example can be found inside the `example` directory.\n\n### Next.js Example\n\nIn this example we use [Next.js](https://github.com/zeit/next.js) for SSG. We use [notion-api-worker](https://github.com/splitbee/notion-api-worker) to fetch data from the API.\n\n`/pages/my-post.jsx`\n\n```js\nimport \"react-notion/src/styles.css\";\nimport \"prismjs/themes/prism-tomorrow.css\";\n\nimport { NotionRenderer } from \"react-notion\";\n\nexport async function getStaticProps() {\n  const data = await fetch(\n    \"https://notion-api.splitbee.io/v1/page/\u003cNOTION_PAGE_ID\u003e\"\n  ).then(res =\u003e res.json());\n\n  return {\n    props: {\n      blockMap: data\n    }\n  };\n}\n\nexport default ({ blockMap }) =\u003e (\n  \u003cdiv style={{ maxWidth: 768 }}\u003e\n    \u003cNotionRenderer blockMap={blockMap} /\u003e\n  \u003c/div\u003e\n);\n```\n\n## Sites using react-notion\n\nList of pages that implement this library.\n\n- [Splitbee Blog](https://splitbee.io/blog)\n- [PS Tunnel](https://pstunnel.com/blog)\n- [timo.sh](https://timo.sh) – _[Source](https://github.com/timolins/timo-sh)_\n\n## Supported Blocks\n\nMost common block types are supported. We happily accept pull requests to add support for the missing blocks.\n\n| Block Type        | Supported  | Notes                                                                                 |\n| ----------------- | ---------- | ------------------------------------------------------------------------------------- |\n| Text              | ✅ Yes     |                                                                                       |\n| Heading           | ✅ Yes     |                                                                                       |\n| Image             | ✅ Yes     |                                                                                       |\n| Image Caption     | ✅ Yes     |                                                                                       |\n| Bulleted List     | ✅ Yes     |                                                                                       |\n| Numbered List     | ✅ Yes     |                                                                                       |\n| Quote             | ✅ Yes     |                                                                                       |\n| Callout           | ✅ Yes     |                                                                                       |\n| Column            | ✅ Yes     |                                                                                       |\n| iframe            | ✅ Yes     |                                                                                       |\n| Video             | ✅ Yes     | Only embedded videos                                                                  |\n| Divider           | ✅ Yes     |                                                                                       |\n| Link              | ✅ Yes     |                                                                                       |\n| Code              | ✅ Yes     |                                                                                       |\n| Web Bookmark      | ✅ Yes     |                                                                                       |\n| Toggle List       | ✅ Yes     |                                                                                       |\n| Page Links        | ✅ Yes     |                                                                                       |\n| Header            | ✅ Yes     | Enable with `fullPage`                                                                |\n| Databases         | ❌ Missing | Not planned. Supported by [react-notion-x](https://github.com/NotionX/react-notion-x) |\n| Checkbox          | ❌ Missing | Supported by [react-notion-x](https://github.com/NotionX/react-notion-x)              |\n| Table Of Contents | ❌ Missing | Supported by [react-notion-x](https://github.com/NotionX/react-notion-x)              |\n\n## Block Type Specific Caveats\n\nWhen using a code block in your Notion page, `NotionRenderer` will use `prismjs` to detect the language of the code block.\nBy default in most project, `prismjs` won't include all language packages in the minified build of your project.\nThis tends to be an issue for those using `react-notion` in a `next.js` project.\nTo ensure the programming language is correctly highlighted in production builds, one should explicitly imported into the project.\n\n```jsx\nimport 'prismjs/components/prism-{language}';\n```\n\n## Credits\n\n- [Tobias Lins](https://tobi.sh) – Idea, Code\n- [Timo Lins](https://timo.sh) – Code, Documentation\n- [samwightt](https://github.com/samwightt) – Inspiration \u0026 API Typings\n- [All people that contributed 💕](https://github.com/splitbee/react-notion/graphs/contributors)\n","funding_links":[],"categories":["TypeScript","Renderers"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsplitbee%2Freact-notion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsplitbee%2Freact-notion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsplitbee%2Freact-notion/lists"}