#Using Mdx

Island.js supports Mdx, which is a powerful way to write content. You can write, import and use React components in Markdown file.

#Markdown

MDX is the super set of Markdown, which means you can write Markdown file as usual. For example:

# Hello World

#Use Components

When you want to use React components in Markdown file, you should name your file with .mdx extension. For example:

// docs/index.mdx
import { CustomComponent } from './custom';

# Hello World

<CustomComponent />

#Front Matter

You can use Front Matter to add metadata to your Markdown file. For example:

---
title: Hello World
---

Note: by default, Island.js use h1 title as the title of html.

You can also access the property defined in front matter, for example:

---
title: Hello World
---

# {meta.title}

The properties defined in front matter will be passed to the component as meta property.So the final output will be:

<h1>Hello World</h1>

You can see more front matter config detail in config-front-matter.