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, community plugin parcel-transformer-mdx is recommended, Babel & TypeScript configuration can be loaded automatically.

Installation

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

Configuration

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