MDX

MDX is a variant of Markdown that compiles to JSX, and supports embedding interactive components inside Markdown documents.

MDX v1 usage

Parcel supports MDX v1 automatically using the @parcel/transformer-mdx plugin. When a .mdx file is detected, it will be installed into your project automatically.

First, install @mdx-js/react. This is needed to render MDX files as React components.

yarn add @mdx-js/react@^1

Then, you can import a .mdx file into your JavaScript and render it using React:

import Hello from "./hello.mdx";

export function App() {
  return <Hello />;
}

# Hello, MDX!

This is a pretty cool MDX file.

MDX v3 usage

If you're using MDX v3, you can use the community plugin parcel-transformer-mdx.

Installation

npm i @parcel/config-default parcel-transformer-mdx -D

Configuration

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.{md,mdx}": ["parcel-transformer-mdx"]
  }
}