Creating and Displaying Content with MDX

Astro also sup­ports MDX via a first-par­ty inte­gra­tion. MDX is a sub­set of mark­down that allows you to use JSX in your mark­down content. 

That sounds kin­da gross, to be hon­est. But let’s look at how we can set that up in Astro.

First, we need to add the MDX inte­gra­tion via astro add.

npx astro add mdx

Astro will update the astro.config.mjs file for you auto­mat­i­cal­ly, import­ing the MDX inte­gra­tion and adding it to the array inte­gra­tions avail­able to Astro.

Now let’s cre­ate a new file called code-of-conduct.mdx and add some basic infor­ma­tion to it:

---
layout: ../layouts/MarkdownArticleLayout.astro
title: Code of Conduct
---
import MarketNews from '../components/MarketNews.astro'


# {frontmatter.title}

Text here...

<MarketNews />

More text here...

Now we can drop an Astro com­po­nent right inside of the con­tent. This is fine for con­tent authored by a devel­op­er but is hard­ly appro­pri­ate for a tru­ly nice con­tent author­ing experience.