MDX is a variant of Markdown that compiles to JSX, and supports embedding interactive components inside Markdown documents. Parcel supports MDX automatically using the @parcel/transformer-mdx plugin. When a .mdx file is detected, it will be installed into your project automatically.

Example usage


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.