MDX Interview Questions and Answers

30+ MDX interview questions — from basic syntax to compiler internals — with answers and code examples you can actually use to prep.

Here are the MDX questions you're most likely to face in interviews. They're organized by difficulty — basics first, then intermediate, then the hard stuff that senior roles ask about.

Basic Questions (1–10)

Q1: What is MDX?

Answer: MDX lets you write JSX (React components) directly inside Markdown files. It compiles down to React components, so you get interactive content while keeping Markdown's simplicity for prose.

mdx example

import { Chart } from './Chart';

# Sales Report

Here's the quarterly data:

<Chart data={salesData} type="bar" />

Q3: What file extension does MDX use?

Answer: .mdx. Some frameworks let you configure .md files to be processed as MDX, but .mdx is the standard.

Q4: How do you write comments in MDX?

Answer: JSX comment syntax. HTML comments will break things:

Example

{/* ✅ This is a valid MDX comment */}

Q5: What is frontmatter in MDX?

Answer: YAML metadata at the top of the file, between --- delimiters. Stores things like title, date, tags — anything you want to access programmatically.

Example

--- title: "Getting Started" date: 2024-01-15 author: "Jane Doe" tags: ["tutorial", "beginner"] --- # {frontmatter.title}

Q6: How do you import a component in MDX?

Answer: Standard ES module imports, placed after frontmatter but before content:

mdx example

---
title: "My Page"
---

import { Button } from '../components/Button';
import Alert from '../components/Alert';

# My Page

<Button variant="primary">Click me</Button>
<Alert type="info">This is informational.</Alert>

Q7: Can you use JavaScript expressions in MDX?

Answer: Yes, with curly braces. But only expressions — not statements:

Example

{/* ✅ Expressions work */} <p>Sum: {2 + 2}</p> <p>Today: {new Date().toLocaleDateString()}</p> <p>{isLoggedIn ? 'Welcome!' : 'Please log in'}</p> {/* ❌ Statements don't work */} {if (true) { return 'yes' }} {for (let i = 0; i < 5; i++) {}}

Q8: Why must all HTML/JSX tags be closed in MDX?

Answer: MDX uses JSX parsing, which requires explicit closing. No self-closing shortcuts like in HTML:

mdx example

{/* ✅ Correct */}
<br />
<img src="photo.png" alt="Photo" />
<hr />

{/* ❌ Invalid in MDX */}
<br>
<img src="photo.png">
<hr>

Q9: What's the difference between `class` and `className` in MDX?

Answer: MDX uses JSX rules. class is a reserved word in JavaScript, so you need className:

mdx example

{/* ✅ JSX attribute name */}
<div className="container">Content</div>

{/* ❌ HTML attribute name - causes error */}
<div class="container">Content</div>

Q10: How do you render Markdown inside a JSX component?

Answer: Add blank lines between the JSX tags and your Markdown. Without them, the parser treats the content as plain text:

mdx example

<Card>

## This is a Markdown heading

And this is a **Markdown** paragraph with *formatting*.

- List item one
- List item two

</Card>

Without the blank lines, the content may be treated as plain text.

Intermediate Questions (11–20)

Q11: What are remark and rehype plugins?

Answer: Remark plugins transform the Markdown AST (mdast). Rehype plugins transform the HTML AST (hast). Together they form the MDX processing pipeline:

Example

// Configuration example const config = { remarkPlugins: [ remarkGfm, // GitHub Flavored Markdown remarkMath, // Math equations remarkToc, // Table of contents ], rehypePlugins: [ rehypeHighlight, // Syntax highlighting rehypeSlug, // Add IDs to headings rehypeAutolinkHeadings, // Link headings ], };

Q12: How does component mapping (MDXProvider) work?

Answer: MDXProvider lets you swap out default HTML elements for custom React components globally. No need to import them in every MDX file:

Example

import { MDXProvider } from '@mdx-js/react'; const components = { h1: (props) => <h1 className="text-4xl font-bold" {...props} />, h2: (props) => <h2 className="text-2xl font-semibold" {...props} />, p: (props) => <p className="leading-relaxed" {...props} />, code: (props) => <CodeBlock {...props} />, a: (props) => <CustomLink {...props} />, img: (props) => <OptimizedImage {...props} />, }; function App({ children }) { return ( <MDXProvider components={components}> {children} </MDXProvider> ); }

Q13: What is the difference between MDX v1 and MDX v3?

Answer:

Feature	MDX v1	MDX v3
JSX runtime	Classic (`React.createElement`)	Automatic (`_jsx`)
Provider	`MDXProvider` wrapper required	Optional, uses context
Compilation	Babel-based	ESM-based, faster
Output format	CommonJS	ES modules
Expression support	Limited	Full JavaScript expressions
Error messages	Cryptic	Clear with line numbers
Performance	Slower compilation	Significantly faster

Q14: How do you pass data/props to an MDX document?

Answer: MDX files are React components. Pass props like you would to any component:

jsx example

// Rendering an MDX file as a component
import MyDocument from './content/page.mdx';

function Page() {
  return <MyDocument author="Jane" version="2.0" />;
}

mdx title="content/page.mdx" example

# Documentation v{props.version}

Written by {props.author}.

Q15: How do you handle dynamic content in MDX?

Answer: Export variables, use expressions, or bring in client components for truly live data:

Example

export const features = [ { name: 'Fast', icon: '⚡' }, { name: 'Simple', icon: '✨' }, { name: 'Powerful', icon: '💪' }, ]; # Features <ul> {features.map(f => ( <li key={f.name}>{f.icon} {f.name}</li> ))} </ul> {/* For truly dynamic content, use client components */} import { LiveData } from '../components/LiveData'; <LiveData endpoint="/api/stats" />

Q16: How does MDX handle layouts?

Answer: Layouts wrap your MDX content. How you set them up depends on your framework:

mdx title="content/page.mdx" example

---
layout: "../layouts/DocsLayout.astro"
---

{/* Or via export (Next.js style) */}
export { default as Layout } from '../layouts/DocsLayout';

{/* Or via default export */}
export default function Layout({ children }) {
  return <article className="prose">{children}</article>;
}

# Page Content

This will be wrapped in the layout.

Q17: What is GFM and how do you enable it in MDX?

Answer: GFM (GitHub Flavored Markdown) adds tables, strikethrough, task lists, and autolinks. You need the remark-gfm plugin:

bash example

npm install remark-gfm

Example

import remarkGfm from 'remark-gfm'; const mdxConfig = { remarkPlugins: [remarkGfm], };

Example

{/* GFM features now available */} | Column A | Column B | |----------|----------| | Cell 1 | Cell 2 | ~~strikethrough~~ - [x] Task done - [ ] Task pending https://auto-linked-url.com

Q18: How do you handle images in MDX?

Answer: You've got several options depending on how much control you need:

Example

{/* Standard Markdown syntax */} ![Alt text](/images/photo.png) {/* JSX for more control */} <img src="/images/photo.png" alt="Descriptive text" width={600} /> {/* Framework-optimized component */} import Image from 'next/image'; <Image src="/images/photo.png" alt="Descriptive text" width={600} height={400} priority /> {/* Custom component with caption */} <Figure src="/images/diagram.png" alt="Architecture diagram" caption="System architecture overview" />

Q19: How do you conditionally render content in MDX?

Answer: JSX conditional expressions — same as you'd do in React:

mdx example

export const isPro = true;
export const userRole = 'admin';

{/* Conditional with && */}
{isPro && <ProFeature />}

{/* Ternary operator */}
{userRole === 'admin' ? (
  <AdminPanel />
) : (
  <p>Access denied. Admin only.</p>
)}

{/* Conditional blocks */}
{process.env.NODE_ENV === 'development' && (
  <div className="debug-info">
    Debug mode active
  </div>
)}

Q20: What is the `components` prop in MDX?

Answer: It lets you override element renderers for a specific MDX instance (versus the global MDXProvider approach):

Example

import Content from './page.mdx'; // Override how elements render for this specific instance <Content components={{ h1: ({ children }) => <h1 className="custom-h1">{children}</h1>, wrapper: ({ children }) => <article>{children}</article>, Alert: MyAlertComponent, // Provide custom components without imports }} />

Advanced Questions (21–32)

Q21: Explain the MDX compilation pipeline.

Answer: MDX goes through these stages to turn your .mdx file into a React component:

1. Parse	Source text → MDX AST (MDXAST)
2. Remark	MDXAST → Transform with remark plugins
3. MDX	HAST → MDXAST → MDXHAST (HTML AST with JSX)
4. Rehype	MDXHAST → Transform with rehype plugins
5. Generate	MDXHAST → JavaScript/JSX output code
6. Bundle/Eval	JS code → Executable React component

javascript example

import { compile } from '@mdx-js/mdx';

const code = await compile('# Hello {name}', {
  remarkPlugins: [],
  rehypePlugins: [],
  outputFormat: 'function-body', // or 'program'
  development: false,
});

Q22: How do you write a custom remark plugin for MDX?

Answer: A remark plugin is a function returning a transformer that operates on the Markdown AST:

javascript title="plugins/remark-reading-time.js" example

import { visit } from 'unist-util-visit';
import { toString } from 'mdast-util-to-string';

export function remarkReadingTime() {
  return function (tree, file) {
    // Extract all text content
    const text = toString(tree);
    const words = text.split(/\s+/).length;
    const readingTime = Math.ceil(words / 200);

    // Attach to file data (accessible in frontmatter/exports)
    file.data.astro = {
      ...file.data.astro,
      frontmatter: {
        ...file.data.astro?.frontmatter,
        readingTime: `${readingTime} min read`,
      },
    };
  };
}

Example

import { visit } from 'unist-util-visit'; export function remarkCallouts() { return (tree) => { visit(tree, 'blockquote', (node, index, parent) => { const firstChild = node.children[0]; if (firstChild?.type === 'paragraph') { const text = firstChild.children[0]?.value || ''; const match = text.match(/^\[!(NOTE|WARNING|TIP)\]/); if (match) { // Transform blockquote into custom callout node node.data = { hName: 'div', hProperties: { className: `callout callout-${match[1].toLowerCase()}` }, }; // Remove the marker text firstChild.children[0].value = text.replace(match[0], '').trim(); } } }); }; }

Q23: How do you write a custom rehype plugin?

Answer: Rehype plugins transform the HTML AST (hast) after the Markdown-to-HTML conversion happens:

Example

import { visit } from 'unist-util-visit'; export function rehypeCodeTitles() { return (tree) => { visit(tree, 'element', (node, index, parent) => { if (node.tagName !== 'pre') return; const codeEl = node.children.find(c => c.tagName === 'code'); if (!codeEl) return; // Extract title from meta string (```js title="file.js") const meta = codeEl.data?.meta || ''; const titleMatch = meta.match(/title="([^"]+)"/); if (titleMatch) { const titleNode = { type: 'element', tagName: 'div', properties: { className: ['code-title'] }, children: [{ type: 'text', value: titleMatch[1] }], }; // Insert title before the code block parent.children.splice(index, 0, titleNode); } }); }; }

Q24: What is the difference between `compile`, `evaluate`, and `run` in @mdx-js/mdx?

Answer: Three different levels of "turn MDX into something usable":

javascript example

import { compile, evaluate, run } from '@mdx-js/mdx';
import * as runtime from 'react/jsx-runtime';

// compile() — Returns JavaScript code as a string
const code = await compile('# Hello', { outputFormat: 'function-body' });
// Returns: 'function _createMdxContent(props) { ... }'

// run() — Executes pre-compiled code into a component
const { default: Component } = await run(code, runtime);

// evaluate() — Compiles AND runs in one step
const { default: Component2 } = await evaluate('# Hello', {
  ...runtime,
  remarkPlugins: [],
});

// Use case: compile() for build-time, evaluate() for runtime/dynamic

Q25: How does MDX handle performance at scale?

Answer: Here are the key strategies:

Example

// 1. Build-time compilation (preferred for static content) // Pre-compile MDX files during build, not at runtime // 2. Incremental compilation // Only recompile changed files const { compile } = require('@mdx-js/mdx'); // Use file hashing to skip unchanged files // 3. Lazy loading heavy components import dynamic from 'next/dynamic'; const HeavyChart = dynamic(() => import('./Chart'), { ssr: false }); // 4. Static generation over server-side rendering export async function getStaticProps() { const source = await fs.readFile('content/page.mdx', 'utf8'); const compiled = await compile(source); return { props: { code: String(compiled) } }; } // 5. Content caching // Cache compiled output with appropriate headers // Use ISR (Incremental Static Regeneration) for semi-dynamic content

Q26: How do you implement MDX remote loading?

Answer: This is for when your MDX content lives in a CMS or database instead of local files:

Example

// Using next-mdx-remote (Next.js) import { serialize } from 'next-mdx-remote/serialize'; import { MDXRemote } from 'next-mdx-remote'; export async function getStaticProps() { // Fetch MDX from CMS, database, or API const source = await fetchFromCMS('/api/content/page-slug'); const mdxSource = await serialize(source, { mdxOptions: { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeHighlight], }, }); return { props: { source: mdxSource } }; } export default function Page({ source }) { return ( <MDXRemote {...source} components={{ Alert, CodeBlock, Tabs }} /> ); }

Q27: How do you handle MDX in a monorepo?

Answer: Share components, config, and themes across multiple MDX sites:

monorepo/ ├── packages/ │ ├── mdx-components/ # Shared component library │ │ ├── src/ │ │ │ ├── Alert.tsx │ │ │ ├── Tabs.tsx │ │ │ └── index.ts │ │ └── package.json │ ├── mdx-config/ # Shared MDX configuration │ │ ├── plugins/ │ │ ├── mdx.config.js │ │ └── package.json │ └── docs-theme/ # Shared theme/layout ├── apps/ │ ├── docs/ # Documentation site │ └── blog/ # Blog site └── content/ ├── docs/ # MDX content for docs └── blog/ # MDX content for blog

json title="packages/mdx-config/package.json" example

{
  "name": "@org/mdx-config",
  "exports": {
    "./plugins": "./plugins/index.js",
    "./config": "./mdx.config.js"
  }
}

Q28: What are MDX's security considerations?

Answer: MDX executes JavaScript. That's powerful but dangerous with untrusted input:

Example

// ❌ DANGER: Never compile untrusted MDX content without sandboxing const userInput = await getUserContent(); // Could contain malicious code const compiled = await compile(userInput); // Executes arbitrary JS! // ✅ Sanitize and restrict when handling user-generated MDX const config = { // Disable exports to prevent code execution remarkPlugins: [remarkDisableExports], // Whitelist allowed components useDynamicImport: false, }; // ✅ Use allowlists for components const safeComponents = { Alert: Alert, // Only expose explicitly approved components }; // ✅ Consider using Markdown (not MDX) for user content // MDX is for trusted authors only

Q29: How do you implement content versioning with MDX?

Answer: Keep versioned content in separate directories:

docs/ ├── v1/ │ ├── getting-started.mdx │ └── api-reference.mdx ├── v2/ │ ├── getting-started.mdx │ └── api-reference.mdx └── latest/ → symlink to v2/

Example

export function getDocsForVersion(version) { const contentDir = path.join(process.cwd(), 'docs', version); const files = glob.sync('**/*.mdx', { cwd: contentDir }); return files.map(file => ({ slug: file.replace('.mdx', ''), path: path.join(contentDir, file), version, })); } // Generate routes for all versions export async function getStaticPaths() { const versions = ['v1', 'v2']; const paths = versions.flatMap(v => getDocsForVersion(v).map(doc => ({ params: { version: v, slug: doc.slug.split('/') }, })) ); return { paths, fallback: false }; }

Q30: How do you test MDX content?

Answer: Test at three levels — compilation, rendering, and link integrity:

Example

import { compile } from '@mdx-js/mdx'; import { render, screen } from '@testing-library/react'; import { evaluate } from '@mdx-js/mdx'; import * as runtime from 'react/jsx-runtime'; // Test 1: Compilation succeeds test('MDX file compiles without errors', async () => { const source = fs.readFileSync('docs/guide.mdx', 'utf8'); await expect(compile(source)).resolves.not.toThrow(); }); // Test 2: Renders expected content test('MDX renders correct heading', async () => { const { default: Content } = await evaluate( '# Hello World', { ...runtime } ); render(<Content />); expect(screen.getByRole('heading')).toHaveTextContent('Hello World'); }); // Test 3: Links are valid test('All internal links resolve', async () => { const links = extractLinks('docs/guide.mdx'); for (const link of links) { expect(fs.existsSync(resolveLink(link))).toBe(true); } });

Q31: Explain MDX's AST structure.

Answer: MDX extends the standard Markdown AST (mdast) with JSX-specific node types:

Example

// Input: "# Hello <Badge>New</Badge>" // AST structure: { type: 'root', children: [ { type: 'heading', depth: 1, children: [ { type: 'text', value: 'Hello ' }, { type: 'mdxJsxTextElement', // MDX-specific node name: 'Badge', attributes: [], children: [ { type: 'text', value: 'New' } ] } ] } ] } // Expression: "{1 + 1}" { type: 'mdxFlowExpression', // or mdxTextExpression value: '1 + 1' } // Import: "import { X } from 'y'" { type: 'mdxjsEsm', value: "import { X } from 'y'" }

Q32: How do you create a custom MDX loader/integration?

Answer: You wire the MDX compiler into your build tool. Here's a Webpack loader example:

Example

import { compile } from '@mdx-js/mdx'; import matter from 'gray-matter'; export async function mdxLoader(source) { // 1. Extract frontmatter const { content, data: frontmatter } = matter(source); // 2. Compile MDX to JavaScript const compiled = await compile(content, { outputFormat: 'function-body', remarkPlugins: [/* ... */], rehypePlugins: [/* ... */], development: process.env.NODE_ENV === 'development', }); // 3. Generate final module code return ` import { Fragment, jsx, jsxs } from 'react/jsx-runtime'; export const frontmatter = ${JSON.stringify(frontmatter)}; ${String(compiled)} `; } // Webpack loader export default function (source) { const callback = this.async(); mdxLoader(source) .then(result => callback(null, result)) .catch(err => callback(err)); }

Bonus Questions

Q33: What frameworks support MDX natively?

Answer: Next.js (via @next/mdx), Gatsby (via gatsby-plugin-mdx), Astro (via @astrojs/mdx), Docusaurus, Remix, and any framework with Vite/Rollup/Webpack via their respective MDX plugins.

Q34: Can MDX be used with TypeScript?

Answer: Yes. Type your components, use .tsx for component files, and add type declarations for .mdx imports:

typescript title="mdx.d.ts" example

declare module '*.mdx' {
  import type { ComponentType } from 'react';
  const Component: ComponentType<Record<string, unknown>>;
  export default Component;
  export const frontmatter: Record<string, unknown>;
}

Q35: What is the future of MDX?

Answer: MDX keeps getting better error messages, faster compilation, stronger TypeScript support, and deeper React Server Components integration. The ecosystem around it — doc frameworks, CMS integrations, tooling — is growing fast.

Summary

These questions cover MDX from syntax basics to compiler internals. When prepping for an interview, focus on understanding *why* things work the way they do — not just memorizing answers. Be ready to write code and explain the pipeline from source to rendered output.

Here are the MDX questions you're most likely to face in interviews. They're organized by difficulty — basics first, then intermediate, then the hard stuff that senior roles ask about.

Basic Questions (1–10)

Q1: What is MDX?

mdx example

import { Chart } from './Chart';

# Sales Report

Here's the quarterly data:

<Chart data={salesData} type="bar" />

Q3: What file extension does MDX use?

Answer: .mdx. Some frameworks let you configure .md files to be processed as MDX, but .mdx is the standard.

Q4: How do you write comments in MDX?

Answer: JSX comment syntax. HTML comments will break things:

Example

{/* ✅ This is a valid MDX comment */}

Q5: What is frontmatter in MDX?

Answer: YAML metadata at the top of the file, between --- delimiters. Stores things like title, date, tags — anything you want to access programmatically.

Example

--- title: "Getting Started" date: 2024-01-15 author: "Jane Doe" tags: ["tutorial", "beginner"] --- # {frontmatter.title}

Q6: How do you import a component in MDX?

Answer: Standard ES module imports, placed after frontmatter but before content:

mdx example

---
title: "My Page"
---

import { Button } from '../components/Button';
import Alert from '../components/Alert';

# My Page

<Button variant="primary">Click me</Button>
<Alert type="info">This is informational.</Alert>

Q7: Can you use JavaScript expressions in MDX?

Answer: Yes, with curly braces. But only expressions — not statements:

Example

Q8: Why must all HTML/JSX tags be closed in MDX?

Answer: MDX uses JSX parsing, which requires explicit closing. No self-closing shortcuts like in HTML:

mdx example

{/* ✅ Correct */}
<br />
<img src="photo.png" alt="Photo" />
<hr />

{/* ❌ Invalid in MDX */}
<br>
<img src="photo.png">
<hr>

Q9: What's the difference between `class` and `className` in MDX?

Answer: MDX uses JSX rules. class is a reserved word in JavaScript, so you need className:

mdx example

{/* ✅ JSX attribute name */}
<div className="container">Content</div>

{/* ❌ HTML attribute name - causes error */}
<div class="container">Content</div>

Q10: How do you render Markdown inside a JSX component?

Answer: Add blank lines between the JSX tags and your Markdown. Without them, the parser treats the content as plain text:

mdx example

<Card>

## This is a Markdown heading

And this is a **Markdown** paragraph with *formatting*.

- List item one
- List item two

</Card>

Without the blank lines, the content may be treated as plain text.

Intermediate Questions (11–20)

Q11: What are remark and rehype plugins?

Answer: Remark plugins transform the Markdown AST (mdast). Rehype plugins transform the HTML AST (hast). Together they form the MDX processing pipeline:

Example

Q12: How does component mapping (MDXProvider) work?

Answer: MDXProvider lets you swap out default HTML elements for custom React components globally. No need to import them in every MDX file:

Example

Q13: What is the difference between MDX v1 and MDX v3?

Answer:

Feature	MDX v1	MDX v3
JSX runtime	Classic (`React.createElement`)	Automatic (`_jsx`)
Provider	`MDXProvider` wrapper required	Optional, uses context
Compilation	Babel-based	ESM-based, faster
Output format	CommonJS	ES modules
Expression support	Limited	Full JavaScript expressions
Error messages	Cryptic	Clear with line numbers
Performance	Slower compilation	Significantly faster

Q14: How do you pass data/props to an MDX document?

Answer: MDX files are React components. Pass props like you would to any component:

jsx example

// Rendering an MDX file as a component
import MyDocument from './content/page.mdx';

function Page() {
  return <MyDocument author="Jane" version="2.0" />;
}

mdx title="content/page.mdx" example

# Documentation v{props.version}

Written by {props.author}.

Q15: How do you handle dynamic content in MDX?

Answer: Export variables, use expressions, or bring in client components for truly live data:

Example

Q16: How does MDX handle layouts?

Answer: Layouts wrap your MDX content. How you set them up depends on your framework:

mdx title="content/page.mdx" example

---
layout: "../layouts/DocsLayout.astro"
---

{/* Or via export (Next.js style) */}
export { default as Layout } from '../layouts/DocsLayout';

{/* Or via default export */}
export default function Layout({ children }) {
  return <article className="prose">{children}</article>;
}

# Page Content

This will be wrapped in the layout.

Q17: What is GFM and how do you enable it in MDX?

Answer: GFM (GitHub Flavored Markdown) adds tables, strikethrough, task lists, and autolinks. You need the remark-gfm plugin:

bash example

npm install remark-gfm

Example

import remarkGfm from 'remark-gfm'; const mdxConfig = { remarkPlugins: [remarkGfm], };

Example

{/* GFM features now available */} | Column A | Column B | |----------|----------| | Cell 1 | Cell 2 | ~~strikethrough~~ - [x] Task done - [ ] Task pending https://auto-linked-url.com

Q18: How do you handle images in MDX?

Answer: You've got several options depending on how much control you need:

Example

Q19: How do you conditionally render content in MDX?

Answer: JSX conditional expressions — same as you'd do in React:

mdx example

export const isPro = true;
export const userRole = 'admin';

{/* Conditional with && */}
{isPro && <ProFeature />}

{/* Ternary operator */}
{userRole === 'admin' ? (
  <AdminPanel />
) : (
  <p>Access denied. Admin only.</p>
)}

{/* Conditional blocks */}
{process.env.NODE_ENV === 'development' && (
  <div className="debug-info">
    Debug mode active
  </div>
)}

Q20: What is the `components` prop in MDX?

Answer: It lets you override element renderers for a specific MDX instance (versus the global MDXProvider approach):

Example

Advanced Questions (21–32)

Q21: Explain the MDX compilation pipeline.

Answer: MDX goes through these stages to turn your .mdx file into a React component:

1. Parse	Source text → MDX AST (MDXAST)
2. Remark	MDXAST → Transform with remark plugins
3. MDX	HAST → MDXAST → MDXHAST (HTML AST with JSX)
4. Rehype	MDXHAST → Transform with rehype plugins
5. Generate	MDXHAST → JavaScript/JSX output code
6. Bundle/Eval	JS code → Executable React component

javascript example

import { compile } from '@mdx-js/mdx';

const code = await compile('# Hello {name}', {
  remarkPlugins: [],
  rehypePlugins: [],
  outputFormat: 'function-body', // or 'program'
  development: false,
});

Q22: How do you write a custom remark plugin for MDX?

Answer: A remark plugin is a function returning a transformer that operates on the Markdown AST:

javascript title="plugins/remark-reading-time.js" example

import { visit } from 'unist-util-visit';
import { toString } from 'mdast-util-to-string';

export function remarkReadingTime() {
  return function (tree, file) {
    // Extract all text content
    const text = toString(tree);
    const words = text.split(/\s+/).length;
    const readingTime = Math.ceil(words / 200);

    // Attach to file data (accessible in frontmatter/exports)
    file.data.astro = {
      ...file.data.astro,
      frontmatter: {
        ...file.data.astro?.frontmatter,
        readingTime: `${readingTime} min read`,
      },
    };
  };
}

Example

Q23: How do you write a custom rehype plugin?

Answer: Rehype plugins transform the HTML AST (hast) after the Markdown-to-HTML conversion happens:

Example

Q24: What is the difference between `compile`, `evaluate`, and `run` in @mdx-js/mdx?

Answer: Three different levels of "turn MDX into something usable":

javascript example

import { compile, evaluate, run } from '@mdx-js/mdx';
import * as runtime from 'react/jsx-runtime';

// compile() — Returns JavaScript code as a string
const code = await compile('# Hello', { outputFormat: 'function-body' });
// Returns: 'function _createMdxContent(props) { ... }'

// run() — Executes pre-compiled code into a component
const { default: Component } = await run(code, runtime);

// evaluate() — Compiles AND runs in one step
const { default: Component2 } = await evaluate('# Hello', {
  ...runtime,
  remarkPlugins: [],
});

// Use case: compile() for build-time, evaluate() for runtime/dynamic

Q25: How does MDX handle performance at scale?

Answer: Here are the key strategies:

Example

Q26: How do you implement MDX remote loading?

Answer: This is for when your MDX content lives in a CMS or database instead of local files:

Example

Q27: How do you handle MDX in a monorepo?

Answer: Share components, config, and themes across multiple MDX sites:

json title="packages/mdx-config/package.json" example

{
  "name": "@org/mdx-config",
  "exports": {
    "./plugins": "./plugins/index.js",
    "./config": "./mdx.config.js"
  }
}

Q28: What are MDX's security considerations?

Answer: MDX executes JavaScript. That's powerful but dangerous with untrusted input:

Example

Q29: How do you implement content versioning with MDX?

Answer: Keep versioned content in separate directories:

Example

Q30: How do you test MDX content?

Answer: Test at three levels — compilation, rendering, and link integrity:

Example

Q31: Explain MDX's AST structure.

Answer: MDX extends the standard Markdown AST (mdast) with JSX-specific node types:

Example

Q32: How do you create a custom MDX loader/integration?

Answer: You wire the MDX compiler into your build tool. Here's a Webpack loader example:

Example

Bonus Questions

Q33: What frameworks support MDX natively?

Answer: Next.js (via @next/mdx), Gatsby (via gatsby-plugin-mdx), Astro (via @astrojs/mdx), Docusaurus, Remix, and any framework with Vite/Rollup/Webpack via their respective MDX plugins.

Q34: Can MDX be used with TypeScript?

Answer: Yes. Type your components, use .tsx for component files, and add type declarations for .mdx imports:

typescript title="mdx.d.ts" example

declare module '*.mdx' {
  import type { ComponentType } from 'react';
  const Component: ComponentType<Record<string, unknown>>;
  export default Component;
  export const frontmatter: Record<string, unknown>;
}

Basic Questions (1–10)

Q1: What is MDX?

Q3: What file extension does MDX use?

Q4: How do you write comments in MDX?

Q5: What is frontmatter in MDX?

Q6: How do you import a component in MDX?

Q7: Can you use JavaScript expressions in MDX?

Q8: Why must all HTML/JSX tags be closed in MDX?

Q9: What's the difference between class and className in MDX?

Q10: How do you render Markdown inside a JSX component?

Intermediate Questions (11–20)

Q11: What are remark and rehype plugins?

Q12: How does component mapping (MDXProvider) work?

Q13: What is the difference between MDX v1 and MDX v3?

Q14: How do you pass data/props to an MDX document?

Q15: How do you handle dynamic content in MDX?

Q16: How does MDX handle layouts?

Q17: What is GFM and how do you enable it in MDX?

Q18: How do you handle images in MDX?

Q19: How do you conditionally render content in MDX?

Q20: What is the components prop in MDX?

Advanced Questions (21–32)

Q21: Explain the MDX compilation pipeline.

Q22: How do you write a custom remark plugin for MDX?

Q23: How do you write a custom rehype plugin?

Q24: What is the difference between compile, evaluate, and run in @mdx-js/mdx?

Q25: How does MDX handle performance at scale?

Q26: How do you implement MDX remote loading?

Q27: How do you handle MDX in a monorepo?

Q28: What are MDX's security considerations?

Q29: How do you implement content versioning with MDX?

Q30: How do you test MDX content?

Q31: Explain MDX's AST structure.

Q32: How do you create a custom MDX loader/integration?

Bonus Questions

Q33: What frameworks support MDX natively?

Q34: Can MDX be used with TypeScript?

Q35: What is the future of MDX?

Summary

Continue learning this concept

Basic Questions (1–10)

Q1: What is MDX?

Q3: What file extension does MDX use?

Q4: How do you write comments in MDX?

Q5: What is frontmatter in MDX?

Q6: How do you import a component in MDX?

Q7: Can you use JavaScript expressions in MDX?

Q8: Why must all HTML/JSX tags be closed in MDX?

Q9: What's the difference between class and className in MDX?

Q10: How do you render Markdown inside a JSX component?

Intermediate Questions (11–20)

Q11: What are remark and rehype plugins?

Q12: How does component mapping (MDXProvider) work?

Q13: What is the difference between MDX v1 and MDX v3?

Q14: How do you pass data/props to an MDX document?

Q15: How do you handle dynamic content in MDX?

Q16: How does MDX handle layouts?

Q17: What is GFM and how do you enable it in MDX?

Q18: How do you handle images in MDX?

Q19: How do you conditionally render content in MDX?

Q20: What is the components prop in MDX?

Advanced Questions (21–32)

Q21: Explain the MDX compilation pipeline.

Q22: How do you write a custom remark plugin for MDX?

Q23: How do you write a custom rehype plugin?

Q24: What is the difference between compile, evaluate, and run in @mdx-js/mdx?

Q25: How does MDX handle performance at scale?

Q26: How do you implement MDX remote loading?

Q27: How do you handle MDX in a monorepo?

Q28: What are MDX's security considerations?

Q29: How do you implement content versioning with MDX?

Q30: How do you test MDX content?

Q31: Explain MDX's AST structure.

Q32: How do you create a custom MDX loader/integration?

Bonus Questions

Q33: What frameworks support MDX natively?

Q34: Can MDX be used with TypeScript?

Q35: What is the future of MDX?

Summary

Continue learning this concept

Q9: What's the difference between `class` and `className` in MDX?

Q20: What is the `components` prop in MDX?

Q24: What is the difference between `compile`, `evaluate`, and `run` in @mdx-js/mdx?

Q9: What's the difference between `class` and `className` in MDX?

Q20: What is the `components` prop in MDX?

Q24: What is the difference between `compile`, `evaluate`, and `run` in @mdx-js/mdx?