Astro: Writing 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.

An astro component with props

// Imported from relative path (same dir as markdown file)
import MyComponent from "./MyComponent.astro"

<MyComponent name="You">
  Welcome to MDX
</MyComponent>

An interactive Solid Js component

// Imported from components directory (src/components)
import MyComponent from "@components/Counter"

// Don't forget the astro client:load directive
<Counter client:load />