{"id":15603497,"url":"https://github.com/n6g7/notion-cms","last_synced_at":"2025-05-12T17:25:18.502Z","repository":{"id":40285726,"uuid":"262380701","full_name":"n6g7/notion-cms","owner":"n6g7","description":"Notion as a headless CMS","archived":false,"fork":false,"pushed_at":"2023-03-04T16:58:54.000Z","size":2340,"stargazers_count":120,"open_issues_count":22,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-04T16:02:03.511Z","etag":null,"topics":["cms","notion"],"latest_commit_sha":null,"homepage":"https://notion-cms.js.org","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/n6g7.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-05-08T17:01:48.000Z","updated_at":"2025-05-03T11:21:02.000Z","dependencies_parsed_at":"2024-06-19T05:22:45.310Z","dependency_job_id":"62e47538-5970-4632-b09b-f4c5ae07d37d","html_url":"https://github.com/n6g7/notion-cms","commit_stats":null,"previous_names":[],"tags_count":60,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/n6g7%2Fnotion-cms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/n6g7%2Fnotion-cms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/n6g7%2Fnotion-cms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/n6g7%2Fnotion-cms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/n6g7","download_url":"https://codeload.github.com/n6g7/notion-cms/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253785739,"owners_count":21964021,"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":["cms","notion"],"created_at":"2024-10-03T03:03:39.887Z","updated_at":"2025-05-12T17:25:18.476Z","avatar_url":"https://github.com/n6g7.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# notion-cms\n\nUse [notion.so](https://www.notion.so/) as a headless CMS.\n\n## Installation\n\nChoose one:\n- `yarn add @notion-cms/client @notion-cms/react`\n- `npm install @notion-cms/client @notion-cms/react`\n\n## Usage\n\n### Setting up a Notion integration\n\nAs of v0.1.0 notion-cms uses the official [Notion API](https://developers.notion.com/) which enables us to cleanly read data from Notion, manage access permissions, etc.\nTo use the Notion API we need to create a Notion integration:\n\n- Go to https://www.notion.so/my-integrations and create an integration for your project.\n- If you're using Notion as a CMS typically read access will be enough (no need for insert or update capabilities). Adapt to your own needs.\n- Copy the integration token.\n- Share any page you need access to with the newly created integration.\n\n### Setting up a collection\n\nThe easiest way to setup your CMS data on Notion is to use [collections](https://www.notion.so/Create-a-database-2529ab92d63b478f87d39c2289527444) (aka \"databases\"):\n![A collection on Notion.so](./docs/notion-collection.png)\n\nUse properties of any type to represent your data.\n\n### Loading data\n\n- The first thing you need to load your collection data is to instanciate a Notion client using the integration token from above:\n  ```ts\n  import Notion from \"@notion-cms/client\";\n  export const notion = new Notion({ auth: process.env.NOTION_API_KEY });\n  ```\n\n- Then we will setup a Typescript interface to match our collection property:\n  ```ts\n  import Notion, {\n    DatabaseProps,\n    ParsedPage,\n    ParsedPageWithBlocks,\n  } from \"@notion-cms/client\";\n\n  export type Duration =\n    | \"Short (0-15 min)\"\n    | \"Medium (15-30 min)\"\n    | \"Long (30+ min)\";\n  export type HealthLevel = \"Indulging\" | \"Comforting\" | \"Energising\";\n  interface RecipeProps extends DatabaseProps {\n    Name: string;\n    \"Health score\": HealthLevel;\n    \"Preparation time (min)\": Duration;\n    \"Cooking time (min)\": Duration;\n    Serves: number;\n  }\n  export interface Recipe extends ParsedPage\u003cRecipeProps\u003e {}\n  export interface RecipeWithBlocks extends ParsedPageWithBlocks\u003cRecipeProps\u003e {}\n  ```\n\n  The [`ParsedPage`](./packages/client/lib/types.ts) generic interface wraps the collection properties (aka props, which extend `DatabaseProps`) as well as meta data (page cover and icon).\n  The `ParsedPageWithBlocks` interface also contains page blocks.\n\n- Then we're going to extract the UUID of the collection we wish to load. One way to find this UUID is to run the following script in the browser console:\n  ```js\n  document\n    .querySelectorAll(\n      \".notion-page-content \u003e .notion-collection_view-block\"\n    )\n    .forEach((collection) =\u003e\n      console.log(\n        collection.querySelector(\"[spellcheck]\").textContent,\n        \":\",\n        collection.attributes[\"data-block-id\"].nodeValue\n      )\n    );\n  ```\n  This will print the UUIDs of all the collections in the current page.\n\n- Finally we can call the `notion.loadDatabase` method to load entries in a database (without blocks):\n  ```ts\n  const recipesCollectionId = \"bc0e5612-c5a1-4e3d-9d63-13bac995e5a2\";\n\n  const getRecipes = (): Promise\u003cRecipe[]\u003e =\u003e\n    notion.loadDatabase(recipesCollectionId, {});\n  ```\n  Or the `notion.loadPage` method to load a single page (with blocks):\n  ```ts\n  const getRecipe = (recipeId: string): Promise\u003cRecipeWithBlocks\u003e =\u003e\n    notion.loadPage(recipeId);\n  ```\n\n### Rendering blocks\n\nOnce a Notion page has been loaded it can be easily rendered with `@notion-cms/react`:\n\n```tsx\nimport { Blocks } from \"@notion-cms/react\";\n\nconst PageComponent = ({ page }) =\u003e (\n  \u003cdiv\u003e\n    \u003cBlocks blocks={page.blocks} /\u003e\n  \u003c/div\u003e\n);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fn6g7%2Fnotion-cms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fn6g7%2Fnotion-cms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fn6g7%2Fnotion-cms/lists"}