SeCoFlowSeCoFlow

Using MDX

Learn how to use MDX for creating rich, interactive documentation.

What is MDX?

MDX is a format that lets you seamlessly write JSX in your Markdown documents. You can import components, such as interactive charts or alerts, and embed them within your content.

Basic Syntax

MDX files use the .mdx extension and support all standard Markdown syntax, plus the ability to use React components.

Writing Markdown

You can use all standard Markdown features:

  • Bold text with **bold**
  • Italic text with *italic*
  • Links with [text](url)
  • Code blocks with triple backticks

Using Components

You can import and use React components directly in your MDX:

import { Callout } from "@/components/callout"

<Callout type="info">
  This is a custom component embedded in MDX!
</Callout>

Best Practices

When working with MDX in SeCoFlow documentation:

  1. Keep components simple and focused
  2. Use semantic HTML elements
  3. Ensure accessibility with proper ARIA labels
  4. Test components in both light and dark modes