MDX: A Complete Example

MDX lets you combine Markdown, React components, and JS expressions in a single file.

Here’s an inline expression:
The result of 2 + 3 is 5.

Headings

This is a third-level heading

Normal paragraph text with italics, bold, and inline code.

Lists

Unordered list:

• First item
• Second item
  • Sub item
• Third item

Ordered list:

1. Step one
2. Step two
3. Step three

Task list:

• Works?
• Maybe?
• Definitely not.

Custom Diagrams Example

Graph Diagram

Sequential Diagram

Flowchart Diagram

Images

Example Image

Links

Next.js Documentation

Using JSX Components

Below is a custom JSX component imported at the top:

You can also pass expressions:

Tables

Code Blocks

export function add(a, b) {
  return a + b;
}
console.log(add(2, 5));

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

Blockquote

MDX is powerful because it blends Markdown and React components.

MDX Expression Block

This is generated line 1

This is generated line 2

This is generated line 3

Footer

Thanks for reading! MDX is awesome 🚀