Junel Capawing
Back to blog
•
2 min read
MDX syntax guide

MDX is largely an extension of markdown with the ability to import .astro, .jsx, .tsx and other framework components you have integrated.

This unlocks a lot of possibilities for creating interactive content.

This guide will cover 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 will accept a javascript date object and format it as a string.

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

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

Example 2

Importing a component from a relative path to your content.

This component will display an alert when you click the button.

import RelativeComponent from "./component.astro";

<RelativeComponent />

Nano is an extremely lightweight theme, with no frameworks, so there aren’t any examples of react, vue, solid etc. You can integrate these frameworks using the guide below, and also use those components in your mdx files.

Don’t forget to use the client directive to make them interactive.

<ReactComponent client:load />