Using MDX
Learning how to use MDX in Astro and when to keep CMS content in plain Markdown.
This theme comes with the @astrojs/mdx ↗ integration installed and configured in your astro.config.ts config file. If you prefer not to use MDX, you can disable support by removing the integration from your config file.
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 you import and use a UI component inside of MDX:
import { Button } from 'astro-pure/user'
<Button>Click Me</Button>When content is edited through Keystatic, it is safer to keep posts in plain Markdown unless you have a specific reason to embed Astro components directly in the article body.
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.