What it is

MDX is a format that lets you write JSX inside Markdown, so an article can embed live React components — charts, interactive figures, embeds — between paragraphs of prose. It compiles to a React component and is supported by Vite, Next.js and Astro.

Why it earns a slot

The reason a technical publication can ship an interactive explainer inside an ordinary article. Every file-based tool here — Tina, Keystatic, Outstatic, Velite — speaks it natively.

Know before you commit

MDX is a compiler, not a CMS: no editor, no media library, no workflow, no roles. Non-technical writers will not author raw MDX, so pair it with an editing layer.

Getting started

npm i @mdx-js/rollup

Field notes

0 from the community

Sign in to add a field note. Reading is always open.

Loading notes…

Field check

Unverified

Sign in to confirm this entry is still accurate.

Pricing snapshot

Free, MIT-licensed open format.

Snapshots move fast — verify at checkout, and post a field note if it changed.

Drop into your Lovable chat

Evaluate MDX (https://mdxjs.com) for this project, then use it only if it fits what we are already building.
Context: Markdown that renders JSX components. MDX is a format that lets you write JSX inside Markdown, so an article can embed live React components — charts, interactive figures, embeds — between paragraphs of prose. It compiles to a React component and is supported by Vite, Next.js and Astro.
Reviewer notes (general, not written for this codebase): The reason a technical publication can ship an interactive explainer inside an ordinary article. Every file-based tool here — Tina, Keystatic, Outstatic, Velite — speaks it natively.
Watch out for: MDX is a compiler, not a CMS: no editor, no media library, no workflow, no roles. Non-technical writers will not author raw MDX, so pair it with an editing layer.
Pricing: Free, MIT-licensed open format.
Setup: npm i @mdx-js/rollup
Rules: treat the notes above as background only. Do not assume a theme, style, layout or feature that is not already in this project — inspect the existing code first and ask me before changing visual direction.

/api/public/tools/mdx