{"id":13468493,"url":"https://github.com/kentcdodds/mdx-bundler","last_synced_at":"2025-04-23T20:48:02.686Z","repository":{"id":38095206,"uuid":"338699314","full_name":"kentcdodds/mdx-bundler","owner":"kentcdodds","description":"🦤 Give me MDX/TSX strings and I'll give you back a component you can render. Supports imports!","archived":false,"fork":false,"pushed_at":"2025-03-05T16:30:38.000Z","size":165,"stargazers_count":1835,"open_issues_count":72,"forks_count":78,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-04-08T23:14:09.617Z","etag":null,"topics":["esbuild","mdx","mdx-bundler"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/kentcdodds.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2021-02-14T00:29:39.000Z","updated_at":"2025-04-05T17:21:00.000Z","dependencies_parsed_at":"2024-01-10T11:06:56.965Z","dependency_job_id":"08ed73ee-4c45-4d51-b652-0eff4094ba4b","html_url":"https://github.com/kentcdodds/mdx-bundler","commit_stats":{"total_commits":112,"total_committers":28,"mean_commits":4.0,"dds":0.625,"last_synced_commit":"aa5b349c26aa6ee0dafaa78c30c3068ec0984a16"},"previous_names":[],"tags_count":48,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Fmdx-bundler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Fmdx-bundler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Fmdx-bundler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Fmdx-bundler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kentcdodds","download_url":"https://codeload.github.com/kentcdodds/mdx-bundler/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250513668,"owners_count":21443204,"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":["esbuild","mdx","mdx-bundler"],"created_at":"2024-07-31T15:01:12.196Z","updated_at":"2025-04-23T20:48:02.661Z","avatar_url":"https://github.com/kentcdodds.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Nextjs Plugins","编辑器相关","others"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\u003ch1\u003emdx-bundler 🦤\u003c/h1\u003e\n\n\u003cp\u003eCompile and bundle your MDX files and their dependencies. FAST.\u003c/p\u003e\n\u003c/div\u003e\n\n---\n\n\u003c!-- prettier-ignore-start --\u003e\n[![Build Status][build-badge]][build]\n[![Code Coverage][coverage-badge]][coverage]\n[![version][version-badge]][package]\n[![downloads][downloads-badge]][npmtrends]\n[![MIT License][license-badge]][license]\n[![All Contributors][all-contributors-badge]](#contributors-)\n[![PRs Welcome][prs-badge]][prs]\n[![Code of Conduct][coc-badge]][coc]\n\u003c!-- prettier-ignore-end --\u003e\n\n## The problem\n\nYou have a string of MDX and various TS/JS files that it uses and you want to\nget a bundled version of these files to eval in the browser.\n\n## This solution\n\nThis is an async function that will compile and bundle your MDX files and their\ndependencies. It uses [MDX v3](https://mdxjs.com/blog/v3/) and\n[esbuild](https://esbuild.github.io/), so it's VERY fast and supports TypeScript\nfiles (for the dependencies of your MDX files).\n\nYour source files could be local, in a remote github repo, in a CMS, or wherever\nelse and it doesn't matter. All `mdx-bundler` cares about is that you pass it\nall the files and source code necessary and it will take care of bundling\neverything for you.\n\n### FAQ:\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n    \u003cstrong\u003e\n      \"What's so cool about MDX?\"\n    \u003c/strong\u003e\n  \u003c/summary\u003e\n\n[MDX](https://mdxjs.com/) enables you to combine terse markdown syntax for your\ncontent with the power of JSX components. For content-heavy sites, writing the\ncontent with straight-up HTML can be annoyingly verbose. Often people solve this\nusing a WSYWIG editor, but too often those fall short in mapping the writer's\nintent to HTML. Many people prefer using markdown to express their content\nsource and have that parsed into HTML to be rendered.\n\nThe problem with using Markdown for your content is if you want to have some\ninteractivity embedded into your content, you're pretty limited. You either need\nto insert an element that JavaScript targets (which is annoyingly indirect), or\nyou can use an `iframe` or something.\n\nAs previously stated, [MDX](https://mdxjs.com/) enables you to combine terse\nmarkdown syntax for your content with the power of JSX components. So you can\nimport a JSX component and render it within the markdown itself. It's the best\nof both worlds.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n    \u003cstrong\u003e\n      \"How is this different from \u003ca href=\"https://github.com/hashicorp/next-mdx-remote\"\u003e\u003ccode\u003enext-mdx-remote\u003c/code\u003e\u003c/a\u003e?\"\n    \u003c/strong\u003e\n  \u003c/summary\u003e\n\n`mdx-bundler` actually bundles dependencies of your MDX files. For example, this\nwon't work with `next-mdx-remote`, but it will with `mdx-bundler`:\n\n```md\n---\ntitle: Example Post\npublished: 2021-02-13\ndescription: This is some description\n---\n\n# Wahoo\n\nimport Demo from './demo'\n\nHere's a **neat** demo:\n\n\u003cDemo /\u003e\n```\n\n`next-mdx-remote` chokes on that import because it's not a bundler, it's just a\ncompiler. `mdx-bundler` is an MDX compiler and bundler. That's the difference.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n    \u003cstrong\u003e\n      \"How is this different from the mdx plugins for webpack or rollup?\"\n    \u003c/strong\u003e\n  \u003c/summary\u003e\n\nThose tools are intended to be run \"at build time\" and then you deploy the built\nversion of your files. This means if you have some content in MDX and want to\nmake a typo change, you have to rebuild and redeploy the whole site. This also\nmeans that every MDX page you add to your site will increase your build-times,\nso it doesn't scale all that well.\n\n`mdx-bundler` can definitely be used at build-time, but it's more powerfully\nused as a runtime bundler. A common use case is to have a route for your MDX\ncontent and when that request comes in, you load the MDX content and hand that\noff to `mdx-bundler` for bundling. This means that `mdx-bundler` is infinitely\nscalable. Your build won't be any longer regardless of how much MDX content you\nhave. Also, `mdx-bundler` is quite fast, but to make this on-demand bundling\neven faster, you can use appropriate cache headers to avoid unnecessary\nre-bundling.\n\nWebpack/rollup/etc also require that all your MDX files are on the local\nfilesystem to work. If you want to store your MDX content in a separate repo or\nCMS, you're kinda out of luck or have to do some build-time gymnastics to get\nthe files in place for the build.\n\nWith `mdx-bundler`, it doesn't matter where your MDX content comes from, you can\nbundle files from anywhere, you're just responsible for getting the content into\nmemory and then you hand that off to `mdx-bundler` for bundling.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n    \u003cstrong\u003e\n      \"Does this work with Remix/Gatsby/Next/CRA/etc?\"\n    \u003c/strong\u003e\n  \u003c/summary\u003e\n\nTotally. It works with any of those tools. Depending on whether your\nmeta-framework supports server-side rendering, you'll implement it differently.\nYou might decide to go with a built-time approach (for Gatsby/CRA), but as\nmentioned, the true power of `mdx-bundler` comes in the form of on-demand\nbundling. So it's best suited for SSR frameworks like Remix/Next.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n    \u003cstrong\u003e\n      \"Can I use this other JSX libraries other than React?\"\n    \u003c/strong\u003e\n  \u003c/summary\u003e\n\nYes! If JSX runtime you want to use is mentioned here - https://mdxjs.com/docs/getting-started/#jsx, it's guaranteed to work. Libraries, such as `hono` which has `react` compatible API also works. Check to [Other JSX runtimes](#other-jsx-runtimes) to get started.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n    \u003cstrong\u003e\n      \"Why the dodo bird emoji? 🦤\"\n    \u003c/strong\u003e\n  \u003c/summary\u003e\n\nWhy not?\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n    \u003cstrong\u003e\n      \"Why is esbuild a peer dependency?\"\n    \u003c/strong\u003e\n  \u003c/summary\u003e\n\nesbuild provides a service written in GO that it interacts with. Only one\ninstance of this service can run at a time and it must have an identical version\nto the npm package. If it was a hard dependency you would only be able to use\nthe esbuild version mdx-bundler uses.\n\n\u003c/details\u003e\n\n## Table of Contents\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Options](#options)\n  - [Returns](#returns)\n  - [Types](#types)\n  - [Component Substitution](#component-substitution)\n  - [Frontmatter and const](#frontmatter-and-const)\n  - [Accessing named exports](#accessing-named-exports)\n  - [Image Bundling](#image-bundling)\n  - [Bundling a file.](#bundling-a-file)\n  - [Custom Components in Downstream Files](#custom-components-in-downstream-files)\n  - [Known Issues](#known-issues)\n- [Inspiration](#inspiration)\n- [Other Solutions](#other-solutions)\n- [Issues](#issues)\n  - [🐛 Bugs](#-bugs)\n  - [💡 Feature Requests](#-feature-requests)\n- [Contributors ✨](#contributors-)\n- [LICENSE](#license)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Installation\n\nThis module is distributed via [npm][npm] which is bundled with [node][node] and\nshould be installed as one of your project's `dependencies`:\n\n```\nnpm install --save mdx-bundler esbuild\n```\n\nOne of mdx-bundler's dependencies requires a working [node-gyp][node-gyp] setup\nto be able to install correctly.\n\n## Usage\n\n```typescript\nimport {bundleMDX} from 'mdx-bundler'\n\nconst mdxSource = `\n---\ntitle: Example Post\npublished: 2021-02-13\ndescription: This is some description\n---\n\n# Wahoo\n\nimport Demo from './demo'\n\nHere's a **neat** demo:\n\n\u003cDemo /\u003e\n`.trim()\n\nconst result = await bundleMDX({\n  source: mdxSource,\n  files: {\n    './demo.tsx': `\nimport * as React from 'react'\n\nfunction Demo() {\n  return \u003cdiv\u003eNeat demo!\u003c/div\u003e\n}\n\nexport default Demo\n    `,\n  },\n})\n\nconst {code, frontmatter} = result\n```\n\nFrom there, you send the `code` to your client, and then:\n\n```jsx\nimport * as React from 'react'\nimport {getMDXComponent} from 'mdx-bundler/client'\n\nfunction Post({code, frontmatter}) {\n  // it's generally a good idea to memoize this function call to\n  // avoid re-creating the component every render.\n  const Component = React.useMemo(() =\u003e getMDXComponent(code), [code])\n  return (\n    \u003c\u003e\n      \u003cheader\u003e\n        \u003ch1\u003e{frontmatter.title}\u003c/h1\u003e\n        \u003cp\u003e{frontmatter.description}\u003c/p\u003e\n      \u003c/header\u003e\n      \u003cmain\u003e\n        \u003cComponent /\u003e\n      \u003c/main\u003e\n    \u003c/\u003e\n  )\n}\n```\n\nUltimately, this gets rendered (basically):\n\n```html\n\u003cheader\u003e\n  \u003ch1\u003eThis is the title\u003c/h1\u003e\n  \u003cp\u003eThis is some description\u003c/p\u003e\n\u003c/header\u003e\n\u003cmain\u003e\n  \u003cdiv\u003e\n    \u003ch1\u003eWahoo\u003c/h1\u003e\n\n    \u003cp\u003eHere's a \u003cstrong\u003eneat\u003c/strong\u003e demo:\u003c/p\u003e\n\n    \u003cdiv\u003eNeat demo!\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/main\u003e\n```\n\n### Options\n\n#### source\n\nThe `string` source of your MDX.\n\n_Can not be set if `file` is set_\n\n#### file\n\nThe path to the file on your disk with the MDX in. You will probably want to\nset [cwd](#cwd) as well.\n\n_Can not be set if `source` is set_\n\n#### files\n\nThe `files` config is an object of all the files you're bundling. The key is the\npath to the file (relative to the MDX source) and the value is the string of the\nfile source code. You could get these from the filesystem or from a remote\ndatabase. If your MDX doesn't reference other files (or only imports things from\n`node_modules`), then you can omit this entirely.\n\n#### mdxOptions\n\nThis allows you to modify the built-in MDX configuration (passed to\n`@mdx-js/esbuild`). This can be helpful for specifying your own\nremarkPlugins/rehypePlugins.\n\nThe function is passed the default mdxOptions and the frontmatter.\n\n```ts\nbundleMDX({\n  source: mdxSource,\n  mdxOptions(options, frontmatter) {\n    // this is the recommended way to add custom remark/rehype plugins:\n    // The syntax might look weird, but it protects you in case we add/remove\n    // plugins in the future.\n    options.remarkPlugins = [...(options.remarkPlugins ?? []), myRemarkPlugin]\n    options.rehypePlugins = [...(options.rehypePlugins ?? []), myRehypePlugin]\n\n    return options\n  },\n})\n```\n\n#### esbuildOptions\n\nYou can customize any of esbuild options with the option `esbuildOptions`. This\ntakes a function which is passed the default esbuild options and the frontmatter\nand expects an options object to be returned.\n\n```typescript\nbundleMDX({\n  source: mdxSource,\n  esbuildOptions(options, frontmatter) {\n    options.minify = false\n    options.target = [\n      'es2020',\n      'chrome58',\n      'firefox57',\n      'safari11',\n      'edge16',\n      'node12',\n    ]\n\n    return options\n  },\n})\n```\n\nMore information on the available options can be found in the\n[esbuild documentation](https://esbuild.github.io/api/#build-api).\n\nIt's recommended to use this feature to configure the `target` to your desired\noutput, otherwise, esbuild defaults to `esnext` which is to say that it doesn't\ncompile any standardized features so it's possible users of older browsers will\nexperience errors.\n\n#### globals\n\nThis tells esbuild that a given module is externally available. For example, if\nyour MDX file uses the d3 library and you're already using the d3 library in\nyour app then you'll end up shipping `d3` to the user twice (once for your app\nand once for this MDX component). This is wasteful and you'd be better off just\ntelling esbuild to _not_ bundle `d3` and you can pass it to the component\nyourself when you call `getMDXComponent`.\n\nGlobal external configuration options:\nhttps://www.npmjs.com/package/@fal-works/esbuild-plugin-global-externals\n\nHere's an example:\n\n```tsx\n// server-side or build-time code that runs in Node:\nimport {bundleMDX} from 'mdx-bundler'\n\nconst mdxSource = `\n# This is the title\n\nimport leftPad from 'left-pad'\n\n\u003cdiv\u003e{leftPad(\"Neat demo!\", 12, '!')}\u003c/div\u003e\n`.trim()\n\nconst result = await bundleMDX({\n  source: mdxSource,\n  // NOTE: this is *only* necessary if you want to share deps between your MDX\n  // file bundle and the host app. Otherwise, all deps will just be bundled.\n  // So it'll work either way, this is just an optimization to avoid sending\n  // multiple copies of the same library to your users.\n  globals: {'left-pad': 'myLeftPad'},\n})\n```\n\n```tsx\n// server-rendered and/or client-side code that can run in the browser or Node:\nimport * as React from 'react'\nimport leftPad from 'left-pad'\nimport {getMDXComponent} from 'mdx-bundler/client'\n\nfunction MDXPage({code}: {code: string}) {\n  const Component = React.useMemo(\n    () =\u003e getMDXComponent(result.code, {myLeftPad: leftPad}),\n    [result.code, leftPad],\n  )\n  return (\n    \u003cmain\u003e\n      \u003cComponent /\u003e\n    \u003c/main\u003e\n  )\n}\n```\n\n#### cwd\n\nSetting `cwd` (_current working directory_) to a directory will allow esbuild to\nresolve imports. This directory could be the directory the mdx content was read\nfrom or a directory that off-disk mdx should be _run_ in.\n\n_content/pages/demo.tsx_\n\n```typescript\nimport * as React from 'react'\n\nfunction Demo() {\n  return \u003cdiv\u003eNeat demo!\u003c/div\u003e\n}\n\nexport default Demo\n```\n\n_src/build.ts_\n\n```typescript\nimport {bundleMDX} from 'mdx-bundler'\n\nconst mdxSource = `\n---\ntitle: Example Post\npublished: 2021-02-13\ndescription: This is some description\n---\n\n# Wahoo\n\nimport Demo from './demo'\n\nHere's a **neat** demo:\n\n\u003cDemo /\u003e\n`.trim()\n\nconst result = await bundleMDX({\n  source: mdxSource,\n  cwd: '/users/you/site/_content/pages',\n})\n\nconst {code, frontmatter} = result\n```\n\n#### grayMatterOptions\n\nThis allows you to configure the\n[gray-matter options](https://github.com/jonschlinkert/gray-matter#options).\n\nYour function is passed the current gray-matter configuration for you to modify.\nReturn your modified configuration object for gray matter.\n\n```js\nbundleMDX({\n  grayMatterOptions: options =\u003e {\n    options.excerpt = true\n\n    return options\n  },\n})\n```\n\n#### bundleDirectory \u0026 bundlePath\n\nThis allows you to set the output directory for the bundle and the public URL to\nthe directory. If one option is set the other must be as well.\n\n_The Javascript bundle is not written to this directory and is still returned as\na string from `bundleMDX`._\n\nThis feature is best used with tweaks to `mdxOptions` and `esbuildOptions`. In\nthe example below `.png` files are written to the disk and then served from\n`/file/`.\n\nThis allows you to store assets with your MDX and then have esbuild process them\nlike anything else.\n\n_It is recommended that each bundle has its own `bundleDirectory` so that\nmultiple bundles don't overwrite each others assets._\n\n```ts\nconst {code} = await bundleMDX({\n  file: '/path/to/site/content/file.mdx',\n  cwd: '/path/to/site/content',\n  bundleDirectory: '/path/to/site/public/file',\n  bundlePath: '/file/',\n  mdxOptions: options =\u003e {\n    options.remarkPlugins = [remarkMdxImages]\n\n    return options\n  },\n  esbuildOptions: options =\u003e {\n    options.loader = {\n      ...options.loader,\n      '.png': 'file',\n    }\n\n    return options\n  },\n})\n```\n\n### Returns\n\n`bundleMDX` returns a promise for an object with the following properties.\n\n- `code` - The bundle of your mdx as a `string`.\n- `frontmatter` - The frontmatter `object` from gray-matter.\n- `matter` - The whole\n  [object returned by gray-matter](https://github.com/jonschlinkert/gray-matter#returned-object)\n\n### Types\n\n`mdx-bundler` supplies complete typings within its own package.\n\n`bundleMDX` has a single type parameter which is the type of your frontmatter.\nIt defaults to `{[key: string]: any}` and must be an object. This is then used\nto type the returned `frontmatter` and the frontmatter passed to\n`esbuildOptions` and `mdxOptions`.\n\n```ts\nconst {frontmatter} = bundleMDX\u003c{title: string}\u003e({source})\n\nfrontmatter.title // has type string\n```\n\n### Component Substitution\n\nMDX Bundler passes on\n[MDX's ability to substitute components](https://mdxjs.com/docs/using-mdx/#components)\nthrough the `components` prop on the component returned by `getMDXComponent`.\n\nHere's an example that removes _p_ tags from around images.\n\n```tsx\nimport * as React from 'react'\nimport {getMDXComponent} from 'mdx-bundler/client'\n\nconst Paragraph: React.FC = props =\u003e {\n  if (typeof props.children !== 'string' \u0026\u0026 props.children.type === 'img') {\n    return \u003c\u003e{props.children}\u003c/\u003e\n  }\n\n  return \u003cp {...props} /\u003e\n}\n\nfunction MDXPage({code}: {code: string}) {\n  const Component = React.useMemo(() =\u003e getMDXComponent(code), [code])\n\n  return (\n    \u003cmain\u003e\n      \u003cComponent components={{p: Paragraph}} /\u003e\n    \u003c/main\u003e\n  )\n}\n```\n\n### Frontmatter and const\n\nYou can reference frontmatter meta or consts in the mdx content.\n\n```mdx\n---\ntitle: Example Post\n---\n\nexport const exampleImage = 'https://example.com/image.jpg'\n\n# {frontmatter.title}\n\n\u003cimg src={exampleImage} alt=\"Image alt text\" /\u003e\n```\n\n### Accessing named exports\n\nYou can use `getMDXExport` instead of `getMDXComponent` to treat the mdx file as\na module instead of just a component. It takes the same arguments that\n`getMDXComponent` does.\n\n```mdx\n---\ntitle: Example Post\n---\n\nexport const toc = [{depth: 1, value: 'The title'}]\n\n# The title\n```\n\n```js\nimport * as React from 'react'\nimport {getMDXExport} from 'mdx-bundler/client'\n\nfunction MDXPage({code}: {code: string}) {\n  const mdxExport = getMDXExport(code)\n  console.log(mdxExport.toc) // [ { depth: 1, value: 'The title' } ]\n\n  const Component = React.useMemo(() =\u003e mdxExport.default, [code])\n\n  return \u003cComponent /\u003e\n}\n```\n\n### Image Bundling\n\nWith the [cwd](#cwd) and the remark plugin\n[remark-mdx-images](https://www.npmjs.com/package/remark-mdx-images) you can\nbundle images in your mdx!\n\nThere are two loaders in esbuild that can be used here. The easiest is `dataurl`\nwhich outputs the images as inline data urls in the returned code.\n\n```js\nimport {remarkMdxImages} from 'remark-mdx-images'\n\nconst {code} = await bundleMDX({\n  source: mdxSource,\n  cwd: '/users/you/site/_content/pages',\n  mdxOptions: options =\u003e {\n    options.remarkPlugins = [...(options.remarkPlugins ?? []), remarkMdxImages]\n\n    return options\n  },\n  esbuildOptions: options =\u003e {\n    options.loader = {\n      ...options.loader,\n      '.png': 'dataurl',\n    }\n\n    return options\n  },\n})\n```\n\nThe `file` loader requires a little more configuration to get working. With the\n`file` loader your images are copied to the output directory so esbuild needs to\nbe set to write files and needs to know where to put them plus the url of the\nfolder to be used in image sources.\n\n\u003e Each call to `bundleMDX` is isolated from the others. If you set the directory\n\u003e the same for everything `bundleMDX` will overwrite images without warning. As\n\u003e a result each _bundle_ needs its own output directory.\n\n```js\n// For the file `_content/pages/about.mdx`\n\nconst {code} = await bundleMDX({\n  source: mdxSource,\n  cwd: '/users/you/site/_content/pages',\n  mdxOptions: options =\u003e {\n    options.remarkPlugins = [...(options.remarkPlugins ?? []), remarkMdxImages]\n\n    return options\n  },\n  esbuildOptions: options =\u003e {\n    // Set the `outdir` to a public location for this bundle.\n    options.outdir = '/users/you/site/public/img/about'\n    options.loader = {\n      ...options.loader,\n      // Tell esbuild to use the `file` loader for pngs\n      '.png': 'file',\n    }\n    // Set the public path to /img/about\n    options.publicPath = '/img/about'\n\n    // Set write to true so that esbuild will output the files.\n    options.write = true\n\n    return options\n  },\n})\n```\n\n### Bundling a file.\n\nIf your MDX file is on your disk you can save some time and code by having\n`mdx-bundler` read the file for you. Instead of supplying a `source` string you\ncan set `file` to the path of the MDX on disk. Set `cwd` to its folder so that\nrelative imports work.\n\n```js\nimport {bundleMDX} from 'mdx-bundler'\n\nconst {code, frontmatter} = await bundleMDX({\n  file: '/users/you/site/content/file.mdx',\n  cwd: '/users/you/site/content/',\n})\n```\n\n### Custom Components in Downstream Files\n\nTo make sure custom components are accessible in downstream MDX files, you \ncan use the `MDXProvider` from `@mdx-js/react` to pass custom components\nto your nested imports.\n\n```\nnpm install --save @mdx-js/react\n```\n\n```tsx\nconst globals = {\n  '@mdx-js/react': {\n    varName: 'MdxJsReact',\n    namedExports: ['useMDXComponents'],\n    defaultExport: false,\n  },\n};\nconst { code } = bundleMDX({\n  source,\n  globals,\n  mdxOptions(options: Record\u003cstring, any\u003e) {\n      return {\n        ...options,\n        providerImportSource: '@mdx-js/react',\n      };\n  }\n});\n```\n\nFrom there, you send the `code` to your client, and then:\n\n```tsx\nimport { MDXProvider, useMDXComponents } from '@mdx-js/react';\nconst MDX_GLOBAL_CONFIG = {\n  MdxJsReact: {\n    useMDXComponents,\n  },\n};\nexport const MDXComponent: React.FC\u003c{\n  code: string;\n  frontmatter: Record\u003cstring, any\u003e;\n}\u003e = ({ code }) =\u003e {\n  const Component = useMemo(\n    () =\u003e getMDXComponent(code, MDX_GLOBAL_CONFIG),\n    [code],\n  );\n\n  return (\n    \u003cMDXProvider components={{ Text: ({ children }) =\u003e \u003cp\u003e{children}\u003c/p\u003e }}\u003e\n      \u003cComponent /\u003e\n    \u003c/MDXProvider\u003e\n  );\n};\n```\n\n### Known Issues\n\n### Other JSX runtimes\nJSX runtimes mentioned [here](https://mdxjs.com/docs/getting-started/#jsx) are guaranteed to be supported, however any JSX runtime should work without problem, as long as they export their own jsx runtime. For example, `hono` is not mentioned here, but as it has `react` compatible API, it can be used without any issues.\n\nTo do so, you will have to pass a configuration object and use JSX Component factory.\n```tsx\nconst getMDX = (source) =\u003e {\n  return bundleMDX({\n    source,\n    jsxConfig: {\n      jsxLib: {\n        varName: 'HonoJSX',\n        package: 'hono/jsx',\n      },\n      jsxDom: {\n        varName: 'HonoDOM',\n        package: 'hono/jsx/dom',\n      },\n      jsxRuntime: {\n        varName: '_jsx_runtime',\n        package: 'hono/jsx/jsx-runtime',\n      },\n    }\n  });\n}\n\n// ...\n\nimport { getMDXComponent } from \"mdx-bundler/client/jsx\";\n\nimport * as HonoJSX from \"hono/jsx\";\nimport * as HonoDOM from \"hono/jsx/dom\";\nimport * as _jsx_runtime from \"hono/jsx/jsx-runtime\";\nconst jsxConfig = {\n  HonoJSX,\n  HonoDOM,\n  _jsx_runtime\n};\n\nexport const MDXComponent: React.FC\u003c{\n  code: string;\n}\u003e = ({ code }) =\u003e {\n  const Component = useMemo(\n    () =\u003e getMDXComponent(code, jsxConfig),\n    [code],\n  );\n\n  return (\n    \u003cComponent components={{ Text: ({ children }) =\u003e \u003cp\u003e{children}\u003c/p\u003e }} /\u003e\n  );\n};\n```\n\nTo use it with others, adjust `jsxConfig` passed to bundler.\n```ts\nconst jsxConfig = {\n  jsxLib: {\n    varName: 'HonoJSX',\n    package: 'hono/jsx',\n  },\n  jsxDom: {\n    varName: 'HonoDOM',\n    package: 'hono/jsx/dom',\n  },\n  jsxRuntime: {\n    varName: '_jsx_runtime',\n    package: 'hono/jsx/jsx-runtime',\n  },\n}\n```\nand to `getMDXComponent`\n```ts\nconst jsxConfig = { HonoJSX, HonoDOM, _jsx_runtime };\n```\n\n\n#### Cloudflare Workers\n\nWe'd _love_ for this to work in cloudflare workers. Unfortunately cloudflare workers\nhave two limitations that prevent `mdx-bundler` from working in that\nenvironment:\n\n1. Workers can't run binaries. `bundleMDX` uses `esbuild` (a binary) to bundle\n   your MDX code.\n2. Workers can't run `eval` or similar. `getMDXComponent` evaluates the bundled\n   code using `new Function`.\n\nOne workaround to this is to put your mdx-bundler related code in a different\nenvironment and call that environment from within the Cloudflare worker. IMO,\nthis defeats the purpose of using Cloudflare workers. Another potential\nworkaround is to use WASM from within the worker. There is\n[`esbuild-wasm`](https://esbuild.github.io/getting-started/#install-the-wasm-version)\nbut there are some issues with that package explained at that link. Then there's\n[`wasm-jseval`](https://github.com/maple3142/wasm-jseval), but I couldn't get\nthat to run code that was output from `mdx-bundler` without error.\n\nIf someone would like to dig into this, that would be stellar, but unfortunately\nit's unlikely I'll ever work on it.\n\n#### Next.JS esbuild ENOENT\n\nesbuild relies on `__dirname` to work out where is executable is, Next.JS and\nWebpack can sometimes break this and esbuild needs to be told manually where to\nlook.\n\nAdding the following code before your `bundleMDX` will point esbuild directly at\nthe correct executable for your platform.\n\n```js\nimport path from 'path'\n\nif (process.platform === 'win32') {\n  process.env.ESBUILD_BINARY_PATH = path.join(\n    process.cwd(),\n    'node_modules',\n    'esbuild',\n    'esbuild.exe',\n  )\n} else {\n  process.env.ESBUILD_BINARY_PATH = path.join(\n    process.cwd(),\n    'node_modules',\n    'esbuild',\n    'bin',\n    'esbuild',\n  )\n}\n```\n\nMore information on this issue can be found\n[in this article](https://www.arcath.net/2021/03/mdx-bundler#esbuild-executable).\n\n## Inspiration\n\nAs I was rewriting [kentcdodds.com](https://kentcdodds.com) to\n[remix](https://remix.run), I decided I wanted to keep my blog posts as MDX, but\nI didn't want to have to compile them all at build time or be required to\nredeploy every time I fix a typo. So I made this which allows my server to\ncompile on demand.\n\n## Other Solutions\n\nThere's [next-mdx-remote](https://github.com/hashicorp/next-mdx-remote) but it's\nmore of an mdx-compiler than a bundler (can't bundle your mdx for dependencies).\nAlso it's focused on Next.js whereas this is meta-framework agnostic.\n\n## Issues\n\n_Looking to contribute? Look for the [Good First Issue][good-first-issue]\nlabel._\n\n### 🐛 Bugs\n\nPlease file an issue for bugs, missing documentation, or unexpected behavior.\n\n[**See Bugs**][bugs]\n\n### 💡 Feature Requests\n\nPlease file an issue to suggest new features. Vote on feature requests by adding\na 👍. This helps maintainers prioritize what to work on.\n\n[**See Feature Requests**][requests]\n\n## Contributors ✨\n\nThanks goes to these people ([emoji key][emojis]):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"https://kentcdodds.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/1500684?v=3?s=100\" width=\"100px;\" alt=\"Kent C. Dodds\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKent C. Dodds\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/mdx-bundler/commits?author=kentcdodds\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/mdx-bundler/commits?author=kentcdodds\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#infra-kentcdodds\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/mdx-bundler/commits?author=kentcdodds\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/benwis\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/6953353?v=4?s=100\" width=\"100px;\" alt=\"benwis\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ebenwis\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/mdx-bundler/issues?q=author%3Abenwis\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/mdx-bundler/pulls?q=is%3Apr+reviewed-by%3Abenwis\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"https://www.arcath.net\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/19609?v=4?s=100\" width=\"100px;\" alt=\"Adam Laycock\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAdam Laycock\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/mdx-bundler/commits?author=Arcath\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/mdx-bundler/commits?author=Arcath\" title=\"Tests\"\u003e⚠️\u003c/a\u003e \u003ca href=\"#ideas-Arcath\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/mdx-bundler/pulls?q=is%3Apr+reviewed-by%3AArcath\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/mdx-bundler/commits?author=Arcath\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"http://wooorm.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/944406?v=4?s=100\" width=\"100px;\" alt=\"Titus\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eTitus\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-wooorm\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/mdx-bundler/pulls?q=is%3Apr+reviewed-by%3Awooorm\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/mdx-bundler/commits?author=wooorm\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/ChristianMurphy\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/3107513?v=4?s=100\" width=\"100px;\" alt=\"Christian Murphy\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eChristian Murphy\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-ChristianMurphy\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"https://ped.ro\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/372831?v=4?s=100\" width=\"100px;\" alt=\"Pedro Duarte\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePedro Duarte\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/mdx-bundler/commits?author=peduarte\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"https://keybase.io/erikras\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/4396759?v=4?s=100\" width=\"100px;\" alt=\"Erik Rasmussen\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eErik Rasmussen\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/mdx-bundler/commits?author=erikras\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/ozyxdev\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/83309085?v=4?s=100\" width=\"100px;\" alt=\"Omar Syx\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eOmar Syx\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/mdx-bundler/issues?q=author%3Aozyxdev\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/gaelhameon\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/17253950?v=4?s=100\" width=\"100px;\" alt=\"Gaël Haméon\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eGaël Haméon\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/mdx-bundler/commits?author=gaelhameon\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/loiacon\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/32134586?v=4?s=100\" width=\"100px;\" alt=\"Gabriel Loiácono\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eGabriel Loiácono\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/mdx-bundler/commits?author=loiacon\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/mdx-bundler/commits?author=loiacon\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"https://skovy.dev\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/5247455?v=4?s=100\" width=\"100px;\" alt=\"Spencer Miskoviak\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSpencer Miskoviak\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/mdx-bundler/commits?author=skovy\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"https://caspertheghost.me\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/53900565?v=4?s=100\" width=\"100px;\" alt=\"Casper\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eCasper\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/mdx-bundler/commits?author=Dev-CasperTheGhost\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"http://a7sc11u.dev\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/803868?v=4?s=100\" width=\"100px;\" alt=\"Apostolos Christodoulou\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eApostolos Christodoulou\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/mdx-bundler/commits?author=a7sc11u\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/yordis\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/4237280?v=4?s=100\" width=\"100px;\" alt=\"Yordis Prieto\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eYordis Prieto\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/mdx-bundler/commits?author=yordis\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/xoumi\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/24864287?v=4?s=100\" width=\"100px;\" alt=\"xoumi\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003exoumi\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/mdx-bundler/commits?author=xoumi\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"http://yasint.dev\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/25561152?v=4?s=100\" width=\"100px;\" alt=\"Yasin\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eYasin\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/mdx-bundler/commits?author=yasinmiran\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"https://moweb.dev\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/22095656?v=4?s=100\" width=\"100px;\" alt=\"Mohammed 'Mo' Mulazada\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMohammed 'Mo' Mulazada\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/mdx-bundler/commits?author=moniac\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"https://www.canrau.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/5196971?v=4?s=100\" width=\"100px;\" alt=\"Can Rau\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eCan Rau\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/mdx-bundler/commits?author=CanRau\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"http://hosenur.dev\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/50978981?v=4?s=100\" width=\"100px;\" alt=\"Hosenur Rahaman\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eHosenur Rahaman\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/mdx-bundler/commits?author=HOSENUR\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"https://macieksitkowski.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/58401630?v=4?s=100\" width=\"100px;\" alt=\"Maciek Sitkowski\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMaciek Sitkowski\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/mdx-bundler/commits?author=sitek94\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/priyang12\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/72823974?v=4?s=100\" width=\"100px;\" alt=\"Priyang\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePriyang\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/mdx-bundler/commits?author=priyang12\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/mdx-bundler/commits?author=priyang12\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/theMosaad\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/48773133?v=4?s=100\" width=\"100px;\" alt=\"Mosaad\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMosaad\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/mdx-bundler/commits?author=theMosaad\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/stefanprobst\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/20753323?v=4?s=100\" width=\"100px;\" alt=\"stefanprobst\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003estefanprobst\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/mdx-bundler/commits?author=stefanprobst\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/mdx-bundler/commits?author=stefanprobst\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"https://vladmoroz.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/8441036?v=4?s=100\" width=\"100px;\" alt=\"Vlad Moroz\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eVlad Moroz\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/mdx-bundler/commits?author=vladmoroz\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors][all-contributors] specification.\nContributions of any kind welcome!\n\n## LICENSE\n\nMIT\n\n\u003c!-- prettier-ignore-start --\u003e\n[npm]: https://www.npmjs.com\n[node]: https://nodejs.org\n[build-badge]: https://img.shields.io/github/workflow/status/kentcdodds/mdx-bundler/validate?logo=github\u0026style=flat-square\n[build]: https://github.com/kentcdodds/mdx-bundler/actions?query=workflow%3Avalidate\n[coverage-badge]: https://img.shields.io/codecov/c/github/kentcdodds/mdx-bundler.svg?style=flat-square\n[coverage]: https://codecov.io/github/kentcdodds/mdx-bundler\n[version-badge]: https://img.shields.io/npm/v/mdx-bundler.svg?style=flat-square\n[package]: https://www.npmjs.com/package/mdx-bundler\n[downloads-badge]: https://img.shields.io/npm/dm/mdx-bundler.svg?style=flat-square\n[npmtrends]: https://www.npmtrends.com/mdx-bundler\n[license-badge]: https://img.shields.io/npm/l/mdx-bundler.svg?style=flat-square\n[license]: https://github.com/kentcdodds/mdx-bundler/blob/main/LICENSE\n[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[prs]: https://makeapullrequest.com\n[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square\n[coc]: https://github.com/kentcdodds/mdx-bundler/blob/main/CODE_OF_CONDUCT.md\n[emojis]: https://github.com/all-contributors/all-contributors#emoji-key\n[all-contributors]: https://github.com/all-contributors/all-contributors\n[all-contributors-badge]: https://img.shields.io/github/all-contributors/kentcdodds/mdx-bundler?color=orange\u0026style=flat-square\n[bugs]: https://github.com/kentcdodds/mdx-bundler/issues?utf8=%E2%9C%93\u0026q=is%3Aissue+is%3Aopen+sort%3Acreated-desc+label%3Abug\n[requests]: https://github.com/kentcdodds/mdx-bundler/issues?utf8=%E2%9C%93\u0026q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3Aenhancement\n[good-first-issue]: https://github.com/kentcdodds/mdx-bundler/issues?utf8=%E2%9C%93\u0026q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3Aenhancement+label%3A%22good+first+issue%22\n[node-gyp]: https://github.com/nodejs/node-gyp#installation\n\u003c!-- prettier-ignore-end --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkentcdodds%2Fmdx-bundler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkentcdodds%2Fmdx-bundler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkentcdodds%2Fmdx-bundler/lists"}