Why MDX?

MDX is a powerful format that brings together multiple content types into a cohesive whole:

The Power of Integration

MDX combines:

Unstructured content via Markdown
Typed schemas via JSON-LD/YAML-LD
Structured data via YAML frontmatter
Executable code via JavaScript/TypeScript
UI components via JSX/React

This integration allows you to write content that is both rich in functionality and maintainable.

Markdown + JSX

At its core, MDX allows you to use JSX in your Markdown content. This means you can:

Write content in familiar Markdown syntax
Import and use React components
Pass data between components
Create interactive documentation

Example


---
$type: https://schema.org/TechArticle
title: Using Components in MDX
---
 
# {frontmatter.title}
 
Here's a regular markdown paragraph.
 
<Alert type="info">
  This is a React component in the middle of Markdown!
</Alert>
 
- List items work
- Just like regular markdown
- But you can also use <Highlight>components inline</Highlight>

Why Choose MDX?

Component Reusability: Use the same components across your documentation
Rich Interactivity: Add interactive elements without leaving your content
Type Safety: Get TypeScript support for your components
Data Integration: Access frontmatter data in your components
Flexible Styling: Style your content using your preferred CSS solution

MDX + Linked Data = MDX-LD

MDX-LD extends MDX by adding:

YAML-LD support in frontmatter
Typed data structures
Semantic relationships between content
Enhanced component props typing

This combination creates a powerful system for creating rich, interactive content with proper data structures and relationships.