{"id":14155889,"url":"https://github.com/mintlify/mdx","last_synced_at":"2025-08-06T02:30:42.960Z","repository":{"id":216504155,"uuid":"740853463","full_name":"mintlify/mdx","owner":"mintlify","description":"Mintlify markdown parser","archived":false,"fork":false,"pushed_at":"2024-10-22T21:33:47.000Z","size":311,"stargazers_count":108,"open_issues_count":2,"forks_count":8,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-12-09T01:36:26.684Z","etag":null,"topics":["mdx","next"],"latest_commit_sha":null,"homepage":"","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/mintlify.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":"2024-01-09T07:48:01.000Z","updated_at":"2024-12-03T15:23:09.000Z","dependencies_parsed_at":"2024-01-10T17:03:06.634Z","dependency_job_id":"3742a0d5-b853-40d8-a85f-646540e8350d","html_url":"https://github.com/mintlify/mdx","commit_stats":null,"previous_names":["mintlify/mdx"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mintlify%2Fmdx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mintlify%2Fmdx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mintlify%2Fmdx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mintlify%2Fmdx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mintlify","download_url":"https://codeload.github.com/mintlify/mdx/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228819495,"owners_count":17976902,"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":["mdx","next"],"created_at":"2024-08-17T08:05:04.285Z","updated_at":"2025-08-06T02:30:42.946Z","avatar_url":"https://github.com/mintlify.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","others"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://mintlify.com\"\u003e\n    \u003cimg\n      src=\"https://res.cloudinary.com/mintlify/image/upload/v1665385627/logo-rounded_zuk7q1.svg\"\n      alt=\"Mintlify Logo\"\n      height=\"64\"\n    /\u003e\n  \u003c/a\u003e\n  \u003cbr /\u003e\n  \u003cp\u003e\n    \u003ch3\u003e\n      \u003cb\u003e\n        Mint\n      \u003c/b\u003e\n    \u003c/h3\u003e\n  \u003c/p\u003e\n  \u003cp\u003e\n    \u003cb\u003e\n      Open source docs builder that's beautiful, fast, and easy to work with.\n    \u003c/b\u003e\n  \u003c/p\u003e\n  \u003cp\u003e\n\n![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen?logo=github) [![Tweet](https://img.shields.io/twitter/url?url=https%3A%2F%2Fmintlify.com%2F)](https://twitter.com/intent/tweet?url=\u0026text=Check%20out%20%40mintlify)\n\n  \u003c/p\u003e\n\u003c/div\u003e\n\n# Mintlify's markdown parser\n\n**@mintlify/mdx** is a thin layer on top of [next-mdx-remote-client](https://github.com/ipikuka/next-mdx-remote-client) that provides a better developer experience for Next.js users by adding support for syntax highlighting.\n\n## Installation\n\n```bash\n# using npm\nnpm i @mintlify/mdx\n\n# using yarn\nyarn add @mintlify/mdx\n\n# using pnpm\npnpm add @mintlify/mdx\n```\n\n## Examples\n\n### Next.js pages router\n\n[You can check the example app here](https://github.com/mintlify/mdx/tree/main/examples/pages-router).\n\n1. Call the `serialize` function inside `getStaticProps` and return the `mdxSource` object.\n\n   ```tsx\n   export const getStaticProps = (async () =\u003e {\n     const mdxSource = await serialize({\n       source: '## Markdown H2',\n     });\n\n     if ('error' in mdxSource) {\n       // handle error case\n     }\n\n     return { props: { mdxSource } };\n   }) satisfies GetStaticProps\u003c{\n     mdxSource: SerializeSuccess;\n   }\u003e;\n   ```\n\n2. Pass the `mdxSource` object as props inside the `MDXComponent`.\n\n   ```tsx\n   export default function Page({ mdxSource }: InferGetStaticPropsType\u003ctypeof getStaticProps\u003e) {\n     return \u003cMDXClient {...mdxSource} /\u003e;\n   }\n   ```\n\n### Next.js app router\n\n[You can check the example app here](https://github.com/mintlify/mdx/tree/main/examples/app-router).\n\n1. Use the `MDXRemote` component directly inside your async React Server Component.\n\n   ```tsx\n   import { MDXRemote } from '@mintlify/mdx';\n\n   export default async function Home() {\n     const source: `---\n      title: Title\n      ---\n\n      ## Markdown H2\n      `;\n\n     return (\n       \u003carticle className=\"prose mx-auto py-8\"\u003e\n         \u003cMDXRemote source={source} parseFrontmatter /\u003e\n       \u003c/article\u003e\n     );\n   }\n   ```\n\n## APIs\n\nSimilar to [next-mdx-remote-client](https://github.com/ipikuka/next-mdx-remote-client), this package exports the following APIs:\n\n- `serialize` - a function that compiles MDX source to SerializeResult.\n- `MDXClient` - a component that renders SerializeSuccess on the client.\n- `MDXRemote` - a component that both serializes and renders the source - should be used inside async React Server Component.\n\n### serialize\n\n```tsx\nimport { serialize } from '@mintlify/mdx';\n\nconst mdxSource = await serialize({\n  source: '## Markdown H2',\n  mdxOptions: {\n    remarkPlugins: [\n      // Remark plugins\n    ],\n    rehypePlugins: [\n      // Rehype plugins\n    ],\n  },\n});\n```\n\n### MDXClient\n\n```tsx\n'use client';\n\nimport { MDXClient } from '@mintlify/mdx';\n\n\u003cMDXClient\n  components={\n    {\n      // Your custom components\n    }\n  }\n  {...mdxSource}\n/\u003e;\n```\n\n### MDXRemote\n\n```tsx\nimport { MDXRemote } from '@mintlify/mdx';\n\n\u003cMDXRemote\n  source=\"## Markdown H2\"\n  mdxOptions={{\n    remarkPlugins: [\n      // Remark plugins\n    ],\n    rehypePlugins: [\n      // Rehype plugins\n    ],\n  }}\n  components={\n    {\n      // Your custom components\n    }\n  }\n/\u003e;\n```\n\n\u003cdiv align=\"center\"\u003e\n  \u003cp\u003e\n    \u003csub\u003e\n      Built with ❤︎ by\n      \u003ca href=\"https://mintlify.com\"\u003e\n        Mintlify\n      \u003c/a\u003e\n    \u003c/sub\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmintlify%2Fmdx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmintlify%2Fmdx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmintlify%2Fmdx/lists"}