Introduction

What is MDC?

MDC stands for MarkDown Components. It's a syntax extension that lets you use components directly inside your Markdown content:

# Welcome to My Blog

This is regular **markdown** with a custom component:

::alert{type="warning"}
This is an important message!
::

MDC Syntax parses this into an AST that can be rendered by Vue or React, turning your Markdown into fully interactive content.

Key Features

Quick Example

Here's how simple it is to render MDC content:

<script setup>
import { MDC } from 'mdc-syntax/vue'

const content = `
# Hello World

::alert{type="info"}
Welcome to MDC Syntax!
::
`
</script>

<template>
  <MDC :markdown="content" />
</template>

import { MDC } from 'mdc-syntax/react'

const content = `
# Hello World

::alert{type="info"}
Welcome to MDC Syntax!
::
`

export default function App() {
  return <MDC markdown={content} />
}

When to Use MDC Syntax

MDC Syntax is ideal for:

• Documentation sites - Write docs in Markdown with interactive examples
• Blog platforms - Rich content with custom components for callouts, embeds, and more
• AI chat interfaces - Stream and render Markdown responses in real-time
• CMS integrations - Let content editors use components without touching code
• Technical writing - Combine prose with live code examples and diagrams

How It Works

graph LR
    A[Markdown + MDC] --> B[Parser]
    B --> C[Minimark AST]
    C --> D{Renderer}
    D --> E[Vue]
    D --> F[React]
    D --> G[HTML]

1. Parse - MDC Syntax parses your content into a compact Minimark AST
2. Transform - The AST can be manipulated, cached, or serialized
3. Render - Framework-specific renderers convert the AST to Vue or React components

Comparison with Other Tools

Next Steps

Ready to get started? Follow these guides: