MDX Showcase

MDX = Markdown + JSX

MDX lets you write regular Markdown and drop in components.

music_note A component rendered inside the page.

Inline Expressions

The current year is 2026.

Render a List with JSX

• You can import components and use them like HTML tags.
• You can embed small JSX expressions inside Markdown.
• You can keep Markdown readability and add interactivity.

Combine Markdown and HTML

You can still write Markdown lists:

• Simple
• Familiar
• Fast

And you can mix in HTML when you need to:

This is a styled HTML callout inside an MDX file.

Code Block

const play = (title) => {
  console.log(`Now playing: ${title}`);
};