Loading comparison...
Loading comparison...
Markdown with embedded JSX components. Used in documentation sites, blogs, and content-driven React applications.
MDX is a format that seamlessly blends Markdown's simplicity with the power of JSX components, first released in 2018 by the unified.js collective. It allows authors to import and embed interactive React components directly within Markdown documents, transforming static content into rich, interactive experiences. MDX compiles to JavaScript, meaning each MDX file becomes a React component that can accept props, manage state, and integrate with the broader application.
The format has become the standard for modern documentation sites, technical blogs, and design system documentation where static text needs to be augmented with live code examples, interactive charts, and embedded widgets. Major documentation frameworks have adopted MDX as a first-class citizen: Docusaurus (Meta), Next.js, Gatsby, Storybook, and Astro all support MDX out of the box. The format supports frontmatter for metadata, custom component mapping to override default HTML elements, and provider-based theming for consistent styling across documents.
MDX v2 and v3 brought significant improvements including better error messages, improved performance through an updated compiler, and support for JavaScript expressions within content. Content management workflows benefit from MDX because non-technical writers can author in familiar Markdown while developers embed interactive elements. The unified.js ecosystem provides plugins for syntax highlighting, math rendering, table of contents generation, and other content transformations.
MDX diffs blend content and code changes in a single file, making it essential to compare both prose edits and component modifications together. Broken JSX imports, changed component props, or altered frontmatter metadata can break entire documentation pages.
Content teams and developers should compare MDX files when updating documentation, modifying embedded interactive examples, or changing component mappings that affect rendering across an entire site.
UtraDiff compares MDX files with syntax highlighting that distinguishes Markdown prose, JSX component imports, inline component usage, and frontmatter metadata. Side-by-side view separates content edits from component prop changes and import modifications, making documentation review efficient.
The diff reveals when a prose change also requires a component update. Alt+arrow navigation jumps between changed sections, and the whitespace-ignore toggle filters out paragraph rewrapping from semantic content changes.
Supported extensions: .mdx