MDX basics
Write documentation with Markdown and JSX components.
MDX combines Markdown with JSX components. You write standard Markdown, and when you need richer elements, you use built-in components directly in your content. No imports are needed.
All standard Markdown syntax works, including GitHub Flavored Markdown (GFM):
#, ##, ###, etc.Blode.md provides over 30 built-in components. Use them directly in your MDX without any import statements:
This is a paragraph with standard Markdown.
<Callout type="info">This is a callout component rendered inline.</Callout>Components accept props just like JSX:
<Card title="My card" icon="star" href="/some-page">
Card content goes here.
</Card>Every page starts with YAML frontmatter between --- delimiters:
---
title: My page title
description: A brief summary of this page.
---
Page content starts here.The title field is required. See the frontmatter reference for all available fields.
Pages are referenced by their file path without the .mdx extension. A file at getting-started/installation.mdx is referenced as "getting-started/installation" in your navigation config.
File names become URL slugs. Use lowercase with hyphens: my-page.mdx, not
My Page.mdx.
Browse all available components in the Components tab.