Using MDX: Components Inside Your Posts

This post’s source file is src/content/posts/en/using-mdx.mdx. Everything below is produced by MDX features that plain .md can’t do — open the file side-by-side with this page to see how each trick works.

1. Imported components

That import Callout from '../../../components/Callout.astro' line at the top of the file makes the theme’s callout component available anywhere in the post:

2. JSX expressions and shared variables

The file exports a brandColors array near the top, and this list is generated from it with a JSX map — change the array once, and every reference updates:

• Midnight: #2E3644
• Gold: #F7B844

Inline expressions work in prose as well: this site defines 2 brand colors.

3. Everything from .md still works

Regular markdown, tables, and Expressive Code blocks are unchanged in .mdx:

const answer: number = 42;
const highlighted = true; // this line is marked
console.warn({ answer, highlighted });

One gotcha to remember

In MDX, curly braces {} and angle brackets <> in prose are treated as code, not text. Write them inside backticks (like this: { }) or escape them (\{), otherwise the build will error with a confusing message pointing at the wrong line.