Back to blog
Mar 12, 2024
2 min read

Astro Sphere: Writing MDX

Lorem ipsum dolor sit amet

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
Hello, You!!!

Welcome to MDX

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 /> 
Clicked 0 times