Using MDX

This theme comes with the @astrojs/mdx integration installed and configured in astro.config.ts.

You can remove the integration if you prefer not to use MDX.

Why MDX?

MDX is a special flavor of Markdown that supports embedded JavaScript & JSX syntax.

It unlocks the ability to mix JavaScript and UI Components into your Markdown content for things like interactive charts or alerts.

Interactivity

Astro Client Directives are required in MDX to create interactive components.

This is exactly the same as using a framework component (e.g. React component) in any Astro page or layout.

Astro render will render a component as static HTML without JavaScript by default unless there is an appropriate directive to indicate otherwise.

More Links

• MDX Syntax Documentation
• Astro Usage Documentation