---
title: "Astro Sphere: Writing MDX"
summary: "Lorem ipsum dolor sit amet"
date: "Mar 12 2024"
draft: false
tags:
- Tutorial
- Astro
- Astro Sphere
- Markdown
- 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](https://docs.astro.build/en/guides/markdown-content/#mdx-features) 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>
```

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 /> 
```

import Counter from "@components/Counter"

<Counter client:load />

<br/>
<br/>
<br/>