# remark-mdx [![Build][build-badge]][build] [![Coverage][coverage-badge]][coverage] [![Downloads][downloads-badge]][downloads] [![Size][size-badge]][size] [![Sponsors][sponsors-badge]][collective] [![Backers][backers-badge]][collective] [![Chat][chat-badge]][chat] remark plugin to support the MDX syntax (JSX, export/import, expressions). ## Contents * [What is this?](#what-is-this) * [When should I use this?](#when-should-i-use-this) * [Install](#install) * [Use](#use) * [API](#api) * [`unified().use(remarkMdx[, options])`](#unifieduseremarkmdx-options) * [`Options`](#options) * [Authoring](#authoring) * [HTML](#html) * [Syntax](#syntax) * [Syntax tree](#syntax-tree) * [Errors](#errors) * [Types](#types) * [Compatibility](#compatibility) * [Security](#security) * [Contribute](#contribute) * [License](#license) ## What is this? This package is a [unified][] ([remark][]) plugin to enable the extensions to markdown that MDX adds: JSX (``), export/import (`export x from 'y'`), and expression {`{1 + 1}`}. You can use this plugin to add support for parsing and serializing them. This plugin does not handle how MDX is compiled to JavaScript or evaluated and rendered to HTML. That’s done by [`@mdx-js/mdx`][mdx]. ## When should I use this? This plugin is useful if you’re dealing with the MDX syntax and integrating with remark, rehype, and the rest of unified. Some example use cases are when you want to lint the syntax or compile it to something other that JavaScript. If you don’t use plugins and want to access the syntax tree, you can use [`mdast-util-from-markdown`][mdast-util-from-markdown] with [`mdast-util-mdx`][mdast-util-mdx]. Typically though, you’d want to move a layer up: `@mdx-js/mdx`. That package is the core compiler for turning MDX into JavaScript which gives you the most control. Or even higher: if you’re using a bundler (Rollup, esbuild, webpack), or a site builder (Next.js) or build system (Vite) which comes with a bundler, you’re better off using an integration: see [§ Integrations][integrations]. ## Install This package is [ESM only][esm]. In Node.js (version 16+), install with [npm][]: ```sh npm install remark-mdx ``` In Deno with [`esm.sh`][esmsh]: ```tsx import remarkMdx from 'https://esm.sh/remark-mdx@3' ``` In browsers with [`esm.sh`][esmsh]: ```html ``` ## Use ```tsx import {remark} from 'remark' import remarkMdx from 'remark-mdx' const file = await remark() .use(remarkMdx) .process('import a from "b"\n\na c {1 + 1} d') console.log(String(file)) ``` Yields: ```mdx import a from "b" a c {1 + 1} d ``` ## API This package exports no identifiers. The default export is [`remarkMdx`][api-remark-mdx]. ### `unified().use(remarkMdx[, options])` Add support for MDX (JSX: `

c	File Name	Size	T	Date
zip	lib/	5	---	2025-08-12 18:36:35
-	index.d.ts	133	ts	2025-08-12 10:28:31
-	index.d.ts.map	125	map	2025-08-12 10:28:31
-	index.js	168	js	2025-08-12 10:28:31
-	license	1099	%	2025-08-12 10:28:31
-	package.json	1469	json	2025-08-12 10:28:31
-	readme.md	9424	md	2025-08-12 10:28:31

🌲 / sam syncthing Code museum-frontend node_modules remark-mdx

control-panel