MDX syntax guide

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.

function greet(person: string) {
  console.log(`Hello ${person},`);
  console.log(`How do?`);
}
greet("Maddison");

import DateComp from "../../../components/FormattedDate";

<DateComp date={new Date()} />

05 Aug 24

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