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.
When you open this page in the browser, you should see the clickable button below.
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.