Building with MDX — A Developer's Guide

MDX is a powerful format that lets you write Markdown with embedded React components. Here's how to make the most of it in Project Distri.

What is MDX?

MDX is Markdown for the component era. It lets you:

• Write content in familiar Markdown syntax
• Embed React components directly in your content
• Use frontmatter for metadata
• Import and export JavaScript

Writing Your First Doc

Create a file in content/docs/:

---
title: My First Doc
description: A getting started guide
order: 1
section: Getting Started
---

# My First Doc

This is written in **MDX**!

Using Code Blocks

Code blocks support syntax highlighting:

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('World'));

Tables

You can create tables using standard Markdown syntax:

| Feature | Status | |---------|--------| | MDX Support | ✅ | | Dark Mode | ✅ | | Responsive | ✅ | | TypeScript | ✅ |

Blockquotes

MDX combines the readability of Markdown with the power of React components. It's the best of both worlds.

Tips

1. Keep frontmatter at the very top of the file
2. Use order to control sidebar position
3. Use section to group related docs
4. Blog posts use date, author, and excerpt fields