Streamdown + MDC Demo

A demo showcasing streaming MDC (Markdown Components) content, combining Vercel’s Streamdown with remark-mdc for rendering custom components in real-time.

undefinedLive Demo: https://streamdown-mdc-demo.vercel.app

Features

• undefinedStreaming Simulation - Watch MDC content stream character by character, similar to AI chat interfaces
• undefinedSynchronized Panels - Both source and preview panels stream simultaneously
• undefinedCustom MDC Components - Alert, Card, Callout, and Badge components
• undefinedPlayback Controls - Start, pause, resume, complete, and reset streaming
• undefinedAdjustable Speed - Slow, normal, and fast streaming speeds
• undefinedLive Indicators - Visual feedback showing active streaming state

MDC Components

The demo includes these custom components:

::alert{type="info"}
This is an info alert.
::

::alert{type="warning"}
This is a warning alert.
::

::callout{icon="💡" title="Pro Tip"}
Callout with icon and title.
::

::card{title="Feature Card"}
Card content with **markdown** support.
::

Inline components: :badge[New]{color="green"} :badge[Beta]{color="yellow"}

Tech Stack

• Vite - Build tool
• React + TypeScript
• Streamdown - Streaming markdown renderer
• remark-mdc - MDC syntax parser
• Tailwind CSS - Styling

Getting Started

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Preview production build
pnpm preview

Project Structure

src/
├── components/
│   ├── MDCComponents.tsx    # Custom MDC components (Alert, Card, etc.)
│   └── MDCRenderer.tsx      # Renders MDC AST to React elements
├── lib/
│   └── mdc-parser.ts        # remark-mdc parser using unified
├── App.tsx                  # Main app with streaming controls
└── index.css                # Tailwind CSS setup

License

MIT