Skip to content
CAI
Software that uses CAICheck a score

mdx-js/mdx

56.0

Adequate · 1 October 2026

6.2k

lines of production code

JavaScript

primary language

2

measurements over time

CAI band scale
CAI trend line
CAI lens gauges

What this system is

This system is the MDX.js v3 monorepo, a comprehensive toolkit for compiling and rendering MDX content across various JavaScript environments. It provides core compilation logic alongside specialized integrations for bundlers like Webpack, esbuild, and Rollup, as well as native support for Node.js via custom loaders. Additionally, it offers framework-specific context providers for React, Preact, and Vue to manage component mapping during rendering.

How it got here

2017–2020 — MDX v3 modernization and ESM migration

10 changes.

The project underwent a comprehensive restructuring to release MDX v3, migrating the codebase to TypeScript and adopting an ESM-only architecture with Node.js 16+ requirements. This period saw the introduction of new framework-specific packages for React and Vue, alongside the rewriting of core loaders and compilers to support modern module resolution and async-first APIs.

2021 — MDX v2 architecture and ecosystem expansion

17 changes.

The project underwent a major architectural refactoring of the core MDX library, separating compilation from execution and deprecating the classic JSX runtime in favor of an automatic runtime. This period also saw the introduction of a unified component context API (MDXProvider) across React, Preact, and Vue integrations, alongside the release of new build plugins for Rollup, esbuild, and Node.js loaders to modernize the ecosystem.

2023 — Test coverage expansion and remark-mdx support

8 changes.

This period focused on significantly increasing test coverage across the project's ecosystem, adding comprehensive suites for the esbuild, loader, node-loader, rollup, vue, preact, and react packages. Additionally, the remark-mdx package was enhanced to include native support for MDX syntax, integrating mdast-util-mdx and micromark-extension-mdxjs to handle JSX and export/import statements within the remark pipeline.

Features

Add @mdx-js/rollup plugin

Introduces a new \@mdx-js/rollup\ package that provides a Rollup (and Vite) plugin for compiling MDX. The package exports a default \mdx\ function that accepts configuration options compatible with \@mdx-js/mdx\, including additional \include\ and \exclude\ patterns for file matching. It is an ESM-only package requiring Node.js 16+ and includes full TypeScript type definitions.

packages/rollup · high confidence

Add JSX support via a custom Node.js loader

A new \script/jsx-loader.js\ file introduces a custom Node.js loader that enables the execution of \.jsx\ files. This loader intercepts imports for JSX files, transforms them into ES modules using esbuild, and returns the resulting code, allowing the project to natively support JSX syntax in its scripts.

script · high confidence

Add MDXProvider and useMDXComponents to Vue integration

The \packages/vue/lib\ directory now includes a new \index.js\ file that exports an \MDXProvider\ component and a \useMDXComponents\ composable. The provider allows users to inject custom MDX components into the Vue application context, while the composable enables components to retrieve the current set of MDX components from that context.

packages/vue/lib · high confidence

Add esbuild plugin for MDX compilation with source maps

Introduces the \@mdx-js/esbuild\ plugin, allowing users to compile MDX files directly within their esbuild bundler workflows. The plugin integrates with \@mdx-js/mdx\ to process MDX content and automatically generates inline source maps for better debugging. It handles file loading, error conversion to esbuild-compatible messages, and supports JSX output configuration.

packages/esbuild/lib · high confidence

Initial release of @mdx-js/react package

The \@mdx-js/react\ package is introduced, providing a React context-based provider for MDX. It exports \MDXProvider\ and \useMDXComponents\ to allow users to pass custom component mappings to MDX content, supporting configuration via a \components\ prop and a \disableParentContext\ option. The package is ESM-only, requires Node.js 16+, and includes full TypeScript definitions for \MergeComponents\ and \Props\.

packages/react · high confidence

Introduce @mdx-js/esbuild plugin

Added a new \@mdx-js/esbuild\ package that provides an esbuild plugin for compiling MDX files to JavaScript. This allows users integrating MDX with esbuild (or tools using esbuild) to process MDX content directly within their build pipeline, complementing existing integrations like webpack and Rollup.

packages/esbuild · high confidence

Introduce @mdx-js/node-loader for native MDX imports

Adds the new \@mdx-js/node-loader\ package, providing Node.js Customization Hooks (loaders) that allow developers to import MDX files directly from the file system using \node --loader=@mdx-js/node-loader\. The package is ESM-only, requires Node.js 16 or higher, and exports \createLoader\ and \load\ functions to handle \file:\ URLs for MD(X) content.

packages/node-loader · high confidence

Introduce @mdx-js/node-loader with source map support

The \@mdx-js/node-loader\ package is added, providing a Node.js ES module loader hook that compiles MDX files on the fly. The loader automatically detects development mode based on the \--conditions development\ flag (via \condition.default.js\ and \condition.development.js\) and appends source maps to the generated output to aid in debugging.

packages/node-loader/lib · high confidence

Introduce @mdx-js/rollup plugin with Vite compatibility

Added a new Rollup plugin (\@mdx-js/rollup\) that compiles MDX files and is compatible with both Rollup and Vite. The plugin supports include/exclude patterns, generates source maps, and handles Vite-specific query parameters (\?raw\ and \?url\) to prevent unnecessary processing. It also converts MDX compilation messages into Rollup/Vite logs for better developer feedback.

packages/rollup/lib · high confidence

Introduce \`@mdx-js/vue\` package for Vue context integration

The \@mdx-js/vue\ package is now available, providing a context-based components provider to combine Vue with MDX. It exports \MDXProvider\ and \useMDXComponents\ to manage component overrides within Vue applications, supporting ESM usage on Node.js 16+, Deno, and in browsers. The package includes full TypeScript definitions and documentation covering installation, usage, and API details.

packages/preact, packages/vue · high confidence

MDX support added to remark-mdx

The remark-mdx package now includes a new entry point at lib/index.js that adds support for MDX syntax, including JSX elements, export/import statements, and expressions. This is achieved by integrating the mdast-util-mdx and micromark-extension-mdxjs libraries to handle MDX parsing and transformation within the remark processor pipeline.

packages/remark-mdx/lib · high confidence

New RSC and MDX-based website build system

The website now uses a new build pipeline based on React Server Components (RSC) and MDX. This introduces a new generation process (\generate.js\) that compiles MDX content, constructs a navigation tree, and outputs static HTML and JSON. The MDX compilation is handled by a custom Node loader (\mdx-loader.js\) which integrates a suite of remark and rehype plugins for features like syntax highlighting (Starry Night), code execution (Twoslash), and automatic metadata inference (titles, descriptions, reading time). The build also generates a sitemap, an RSS feed for blog posts (\post.js\), and handles static asset copying and redirects (\prep.js\).

website · high confidence

Behavioural changes

Introduce ESM-based webpack loader with CommonJS wrapper

The \@mdx-js/loader\ package has been rewritten to use an ESM core (\lib/index.js\) while providing a CommonJS entry point (\index.cjs\) that dynamically imports the ESM module. This change ensures compatibility with Webpack's loader interface while allowing the underlying implementation to leverage modern ESM features. The loader now relies on dynamic \import()\ calls to load the MDX compilation logic, addressing previous issues with TypeScript type generation and ensuring proper module resolution in Webpack environments.

packages/loader · high confidence

Introduce MDX context provider and hook via JSDoc-based module

The \packages/preact/lib\ directory now contains a new \index.js\ file that implements the core MDX context mechanism for Preact. This module exports \MDXProvider\, a component that manages the MDX component context and supports merging via a function or object, and \useMDXComponents\, a hook to access the current context. The implementation uses JSDoc \@import\ tags to define types from \mdx/types.js\ and \preact\, replacing previous TypeScript-based definitions for this specific location.

packages/preact/lib · high confidence

Introduce \`@mdx-js/mdx\` v3 with ESM-only, async-first API

The \@mdx-js/mdx\ package has been rewritten as an ESM-only module (Node.js 16+) that exports named functions (\compile\, \compileSync\, \createProcessor\, \evaluate\, \evaluateSync\, \run\, \runSync\) instead of a default export. This shift makes the async API the primary interface, aligning with modern JavaScript practices and improving compatibility with bundlers and frameworks like React 18.

packages/mdx · high confidence

MDX core library refactored with new compile/run architecture and deprecated classic JSX runtime

The \@mdx-js/mdx\ core library has been restructured into distinct modules (\compile\, \core\, \evaluate\, \run\) to separate compilation from execution, introducing \compile\ and \compileSync\ for generating JavaScript and \run\/\runSync\ for evaluating it. The classic JSX runtime is now deprecated in favor of the automatic runtime, with a console warning issued when legacy options like \jsxRuntime: 'classic'\ or \pragma\ are used. New configuration options include \baseUrl\ for resolving relative imports, \tableCellAlignToStyle\ to convert obsolete HTML align attributes to CSS styles, and \remarkRehypeOptions\ to pass settings to the remark-rehype plugin. The \format: 'detect'\ option has been moved to the \compile\ function, and several legacy options (\compilers\, \mdPlugins\, etc.) have been removed entirely.

packages/mdx/lib · high confidence

New MDX Webpack loader with automatic source maps and development mode detection

The \packages/loader/lib/index.js\ file introduces the core logic for the MDX Webpack loader, replacing the previous CommonJS wrapper. This loader now automatically infers the \development\ option based on the Webpack mode and enables source maps when \this.sourceMap\ is true, removing the need for manual configuration of these settings. It also implements a compiler-scoped cache for MDX processors to improve build performance and adds specific error handling that includes file path and positional information in crash messages. Additionally, it enforces the removal of the deprecated \renderer\ option, guiding users to the v2 migration path.

packages/loader/lib · high confidence

New MDXProvider and useMDXComponents API with context optimization

The \packages/react/lib\ package now exposes a new \MDXProvider\ component and a \useMDXComponents\ hook, replacing the previously removed \MDXContext\ and \withMDXComponents\. The \MDXProvider\ accepts a \disableParentContext\ prop to isolate component overrides and supports a \components\ prop that can be either an object or a merge function. The implementation uses \React.useMemo\ to optimize context updates, preventing unnecessary re-renders when context values change.

packages/react/lib · high confidence

Refactored MDX compilation pipeline with new internal plugins

The MDX compilation pipeline has been restructured into distinct internal plugins (\recma-build-jsx-transform\, \recma-document\, \recma-jsx-rewrite\, \rehype-remove-raw\, and \remark-mark-and-unravel\). This refactoring improves how JSX is handled: explicit JSX elements are now marked to prevent them from being overridden by global components, and the \recma-jsx-rewrite\ plugin ensures undefined components throw errors or are resolved from props/providers. The \recma-document\ plugin now better manages layouts and exports, while \remark-mark-and-unravel\ correctly unravels paragraphs containing JSX and handles whitespace. These changes enhance the reliability of component resolution and error reporting during MDX compilation.

packages/mdx/lib/plugin · high confidence

Refactored MDX processing utilities for format detection and AST manipulation

The \packages/mdx/lib/util\ directory has been restructured with new internal utilities that improve how the MDX compiler handles file formats and abstract syntax tree (AST) nodes. A new \createFormatAwareProcessors\ module introduces smart, cached processors that automatically detect whether a file is Markdown or MDX based on its extension, allowing users to process mixed content without explicit format configuration. Supporting this, \resolveFileAndOptions\ now handles format detection logic, while \extnames\ and \extnamesToRegex\ provide standardized extension matching. Additionally, several new AST helper functions (\estree-util-\*\) have been added to manage node creation, convert declarations to expressions, and transform specifiers, providing a more robust foundation for code generation and transformation within the compiler.

packages/mdx/lib/util · high confidence

Repository restructured for MDX v3 with TypeScript and modern tooling

The project has been rebranded from \@compositor/markdown\ to MDX, with the README and license updated to reflect the new identity and Vercel's involvement. The codebase has been migrated to TypeScript, introducing a \tsconfig.json\ that enforces strict mode, ES2022 targets, and Node 16 module resolution. The legacy \index.js\ entry point was removed, and configuration files were modernized: \.prettierignore\ was added to exclude markdown files from formatting, \renovate.json5\ replaced the previous JSON config, and \.gitignore\ was updated to track declaration maps and TypeScript build info while ignoring the new \public/\ directory.

(repo-wide) · high confidence

remark-mdx v3 is now ESM-only and requires Node.js 16+

The remark-mdx package has been updated to version 3, shifting to an ES module (ESM) only distribution and raising the minimum supported Node.js version to 16. This change affects how the plugin is imported and used in projects, requiring ESM-compatible build tools or Node.js environments that support native ES modules.

packages/remark-mdx · high confidence

Test coverage

Added comprehensive test suite for MDX compilation and evaluation; Added test suite for @mdx-js/esbuild plugin; Added test suite for @mdx-js/vue package; Added test utilities for MDX context testing; Added tests for @mdx-js/react MDXProvider behavior; Added tests for MDX parsing and serialization; Added tests for MDXProvider and useMDXComponents in Preact; Added tests for Rollup plugin integration with Vite and logging; Added tests for the MDX loader; Added tests for the Node.js ESM loader; Removed legacy test suite for basic markdown rendering; Removed obsolete AVA snapshot report for JSX code block handling.

Dependencies

MDX.js v3.1.1 monorepo dependency update

The MDX.js monorepo has been updated to version 3.1.1 across all core packages, including the MDX compiler, webpack loader, esbuild and rollup plugins, Node.js loader, and React, Preact, and Vue renderers. This release upgrades the underlying dependency tree, notably bumping React and its type definitions to version 19, and aligning core utilities like unified, vfile, and remark-parse to their latest major versions (v11 and v6 respectively).

(dependencies) · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

How this codebase got here

Score

  • CAI 52 → 56 (+3.8)
  • Rubric changed (rubric-2026.09.11 → rubric-2026.09.18) — scores are not directly comparable.

Lenses

  • Code Health 73 → 73 (+0.0)
  • Architecture 100 → 100 (+0.0)
  • Maturity 63 → 63 (+0.0)
  • Readiness 46 → 47 (+1.1)
  • Security 46 → 57 (+10.8)
  • Accessibility 66 → 66 (+0.0)
  • Performance 100 (new)

Resolved (5)

  • Dependency hygiene PARTLY measured — npm pinning read, dependency currency not (no pnpm-resolved versions to grade)
  • Documentation: written for insiders (README.md)
  • High CVE: [GHSA redacted] (package-lock.json)
  • High CVE: [GHSA redacted] (package-lock.json)
  • Off-boarding risk: anonymized user #1

New (11)

  • High CVE: [GHSA redacted] (package-lock.json)
  • High CVE: [GHSA redacted] (package-lock.json)
  • Off-boarding risk: anonymized user #1
  • Outdated (npm): @rollup/pluginutils
  • Outdated (npm): @types/estree
  • Outdated (npm): @types/hast
  • Outdated (npm): @types/mdx
  • Outdated (npm): acorn
  • Outdated (npm): estree-util-scope
  • Outdated (npm): source-map
  • Outdated (npm): unist-util-visit

Changes since last survey

  • 2 commits — 2 feature/other, 0 fixes

By area

  • .github/workflows — 2 commits

Notable commits

  • change: Update actions/checkout action to v7 (#2692)
  • change: Update actions/setup-node action to v7 (#2694)

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

Survey your own repository

mdx-js/mdx was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.

About this page

  • The score is its most recent published measurement, taken on 1 October 2026 at a pinned commit. It is not a live figure and does not change until the project is measured again.
  • Measured at commit 52285a6758fa078ec57f3d4bd8803d9cbfb12065 — the exact code this score is about.
  • Scored under rubric-2026.09.18 — the same rubric and the same method as every other entry in this index.
  • Measured by watchdog.canine.dev using codehealth-analyzer preprod-e569280dd5e2.