Using MDX
Lorem ipsum dolor sit amet
This theme comes with the @astrojs/mdx integration installed and configured in your astro.config.mjs 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.
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.
Interested in publishing your own writing here?
We’re building a curated publication shaped by independent voices. If you have an idea, reflection, or long-form piece you’d like to develop and publish, we’d be glad to hear from you. Share your email and a brief note — we’ll reach out with next steps and editorial guidance.
Continue Reading
© 2026 SheafX Labs. All Rights Reserved.
This content is owned by SheafX Labs and/or the respective author. Limited sharing is permitted with proper credit and a direct link to the original article. Commercial use or republication requires prior written permission.
Leave a Comment
Comments
0No comments yet
Be the first to share your thoughts!