Using MDX

This theme comes with the @astrojs/mdxintegration installed and configured in your astro.config.mjs config file.

Why MDX? Link to 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 contentfor 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 Link to 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.

1
2
3
4
5
6

import { Meta } from 'astro-seo';

<Meta
  title="My Page"
  description="My page description"
/>

Note: Client Directivesare still required to create interactive components. Otherwise, all components in your MDX will render as static HTML (no JavaScript) by default.

Common Pitfalls Link to Common Pitfalls

Summary Link to Summary

• Use MDX when Markdown alone is not enough
• Import only the components you need per post
• Keep examples minimal and focused

More Links Link to More Links

• MDX Syntax Documentation
• Astro Usage Documentation