{"library":"mdx-bundler","title":"mdx-bundler","description":"mdx-bundler is a high-performance library designed to compile and bundle MDX files along with their JavaScript/TypeScript dependencies, making it ideal for rendering dynamic content. The current stable version is 10.1.1. It maintains an active release cadence, with several minor and patch releases annually addressing bugs and introducing features, demonstrating ongoing development. A key differentiator is its use of esbuild, which enables extremely fast bundling, setting it apart from other MDX solutions. Unlike `next-mdx-remote`, `mdx-bundler` actively bundles file imports specified within MDX content, allowing for complex interactive components to be defined in separate files and imported directly. This capability makes it powerful for both build-time and on-demand, runtime content processing, offering scalability where each new MDX page does not necessarily increase build times.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install mdx-bundler"],"cli":null},"imports":["import { bundleMDX } from 'mdx-bundler'","import { getMDXComponent } from 'mdx-bundler'","import type { MDXRemoteSerializeResult } from 'mdx-bundler'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { bundleMDX, getMDXComponent } from 'mdx-bundler';\nimport * as React from 'react';\nimport { renderToString } from 'react-dom/server';\n\n// Example MDX content with an import\nconst mdxSource = `\n---\ntitle: My Awesome Post\npublished: 2023-10-26\n---\n\n# Hello from MDX!\n\nimport CustomComponent from './my-component';\n\nThis is some content.\n<CustomComponent text=\"World\" />\n\nHere's a list:\n- Item 1\n- Item 2\n`;\n\n// Example dependency file for the MDX\nconst myComponentSource = `\nimport * as React from 'react';\n\nexport default function CustomComponent({ text }) {\n  return <p>Hello, {text}!</p>;\n}\n`;\n\nasync function processAndRenderMdx() {\n  // Required for esbuild to find its binary in some environments, especially Windows\n  if (process.platform === 'win32') {\n    process.env.ESBUILD_BINARY_PATH = './node_modules/esbuild/esbuild.exe';\n  } else {\n    process.env.ESBUILD_BINARY_PATH = './node_modules/esbuild/bin/esbuild';\n  }\n\n  const { code, frontmatter } = await bundleMDX({\n    source: mdxSource,\n    files: {\n      './my-component.tsx': myComponentSource,\n    },\n    // You can customize MDX options (remark/rehype plugins) here\n    mdxOptions(options) {\n      options.remarkPlugins = [...(options.remarkPlugins ?? [])];\n      options.rehypePlugins = [...(options.rehypePlugins ?? [])];\n      return options;\n    },\n  });\n\n  // Dynamically import and execute the bundled code\n  // This is typically done in a React component or server-side rendering setup\n  const Component = getMDXComponent(code);\n\n  // Example of server-side rendering using react-dom/server\n  const html = renderToString(\n    <Component components={{\n      // You can pass components here if they are not imported in MDX or for custom rendering\n      // e.g., p: (props) => <p style={{ color: 'blue' }} {...props} />\n    }} />\n  );\n\n  console.log('Frontmatter:', frontmatter);\n  console.log('Rendered HTML (first 200 chars):', html.substring(0, 200) + '...');\n}\n\nprocessAndRenderMdx().catch(console.error);\n","lang":"typescript","description":"This quickstart demonstrates how to bundle MDX content with local dependencies, extract frontmatter, and render the resulting MDX component using `mdx-bundler` with server-side React rendering.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}