Note to PVCC Coding Club members: This is an example blog post showing how to use MDX in Astro.

What is 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.

Example

Here is how you import and use a UI component inside of MDX.
When you open this page in the browser, you should see the clickable button below.

Embedded component in MDX

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.