Skip to content

Parsing MDX

Lanexio Parser implements MDX 3.0 — Markdown extended with JSX elements, ESM statements, and expressions. The MDX grammar builds on the CommonMark and GFM engine, so all standard Markdown features work alongside MDX constructs.

Quick start

Install the package.
- pnpm
- npm
- yarn
Terminal window
pnpm add @lanexio/parser-grammar-mdx
Terminal window
npm install @lanexio/parser-grammar-mdx
Terminal window
yarn add @lanexio/parser-grammar-mdx

Parse an MDX document.

import { parseMdx } from '@lanexio/parser-grammar-mdx';

const encoder = new TextEncoder();
const tree = parseMdx(encoder.encode(`
  import { Chart } from './chart'

  # Sales Report

  <Chart data={[1, 2, 3]} />

  Revenue grew **{pct}%** year over year.
`));

What MDX includes

MDX extends Markdown with three constructs:

ESM — import and export statements at the document level
JSX — block and inline elements with attributes, fragments, and nested content
Expressions — { ... } braces in flow and text contexts

Standard Markdown features (headings, lists, code blocks, emphasis, links, images, tables, task lists, footnotes) all work inside MDX documents.

Options

Option	Type	Default	Description
`gfm`	`boolean`	`true`	Enable GFM extensions (tables, task lists, strikethrough)

The MDX parser delegates to the Markdown engine, so all Markdown parse options are available.

Inspecting the tree

import { MdxKind } from '@lanexio/parser-grammar-mdx';

const cursor = tree.cursor();
cursor.gotoFirstChild();

// Walk top-level nodes:
//   MdxEsm (import/export blocks)
//   Heading, Paragraph (Markdown content)
//   MdxJsxFlowElement (component blocks)
//   MdxFlowExpression ({...} in flow position)

See also