MDX is an extension of Markdown with the ability to import .astro,
.jsx, .tsx and other framework components you have integrated.
This guide covers the basics of MDX syntax and how to use it, as well as a few examples.
Example 1
Importing a component from the /components directory.
This component accepts a Javascript date object and format it as a string.
import DateComp from "../../../components/FormattedDate.astro";
<DateComp date={new Date()} />
Example 2
Importing a component from a relative path to your content.
This component displays an alert when the button is clicked.
import RelativeComponent from "./component.astro";
<RelativeComponent />
By default Astro has zero frameworks installed. If you install a framework, components of that framework can be used in MDX files.
💡
Don’t forget to use client directives to make framework components interactive.
<ReactComponent client:load />