Markdown vs MDX: What's the Difference?

I recently started adding a blog to my portfolio, and while figuring out how I wanted to write my posts, I ran into something I somehow never really understood:

What's the difference between Markdown and MDX?

I knew what Markdown was. .md files, headings, links, code blocks, all that stuff.

Then I saw .mdx.

And I thought:

"Okay... is this just Markdown with an X slapped onto it?"

Turns out, kind of.

So what's the difference?

Markdown is mainly for writing content.

You can write something like:

# Hello

This is a blog post.

## Section

Here is some more text.

It's simple. You write content, and your Markdown gets turned into HTML.

MDX does basically the same thing, but it can also use React components.

So instead of only writing:

# Hello

This is a blog post.

you could do something like:

# Hello

This is a blog post.

<SomeReactComponent />

That's the big difference.

So... they're basically the same?

For normal writing, pretty much.

If I'm just writing about something I learned, Markdown is more than enough.

If I eventually want to put interactive React components, custom demos, or other React-powered things directly inside my posts, that's where MDX becomes useful.

So my extremely scientific explanation is:

Markdown is James.

MDX is Cool James.

They're basically the same guy, except Cool James can do React stuff.

What am I going to use?

For my portfolio blog, I'm starting with Markdown.

I don't need interactive components in my articles right now. I mostly want to write about things I'm building, things I'm learning, and random technical rabbit holes I end up going down.

If I eventually need React components inside my posts, I can move to MDX later.

For now:

Markdown
    ↓
Write stuff
    ↓
Turn it into HTML
    ↓
Publish

Simple enough.

And now I finally know what the difference is.

Ask AI