.mdx File — Markdown with JSX

MDX combines Markdown's readable syntax with JSX components, enabling rich, interactive content in documentation, blogs, and content-driven websites. MDX files allow importing and embedding React (or other JSX-compatible framework) components directly within Markdown content, creating a powerful authoring format that bridges technical writing and interactive web development. Content authors can write prose in familiar Markdown while inserting interactive charts, code playgrounds, design system components, callout boxes, and any custom React component inline with their text. MDX supports frontmatter metadata (YAML), custom components that replace standard HTML elements (e.g., a custom CodeBlock instead of code fences), layout components that wrap entire documents, and dynamic content through JavaScript expressions. The format is compiled by the @mdx-js/mdx compiler and integrates with frameworks like Next.js, Gatsby, Remix, and Astro. MDX is widely used for technical documentation (Docusaurus, Nextra), component libraries (Storybook), content management, and personal blogs. The format has become essential in the JAMstack ecosystem where content-rich sites need to combine editorial content with interactive UI components.