A static post about apricots is fine. A post where you can click a button and pretend to triage an apricot is better. That’s why these field notes are written in MDX — it lets me embed real interactive components right next to the fruit talk. This site ships with the @astrojs/mdx integration already configured in astro.config.mjs.

Why MDX?

MDX is a special flavor of Markdown that supports embedded JavaScript & JSX syntax. This unlocks the ability to mix JavaScript and UI Components into your Markdown content for things like interactive charts or alerts.

If you have existing content authored in MDX, this integration will hopefully make migrating to Astro a breeze.

Example

Here is how I import and use a UI component inside of MDX.
When you open this page in the browser, you should see the clickable button below. Pretend it’s the “Pick Apricot” action on my board.

🍑 Move apricot to Done

More Links

• MDX Syntax Documentation
• Astro Usage Documentation
• Note: Client Directives are still required to create interactive components. Otherwise, all components in your MDX will render as static HTML (no JavaScript) by default.