Streamdown Rendering Performance Demo

A comprehensive demo project for evaluating Streamdown rendering performance with Mermaid diagrams and code blocks. Built with TanStack Router + Vite + TypeScript.

Features

• Streamdown v2 integration with official plugins (@streamdown/code, @streamdown/mermaid)
• Baseline comparison using react-markdown + remark-gfm
• Static and streaming render modes
• Performance metrics with performance.mark/measure
• Duplicate detection via MutationObserver
• React commit tracking via RenderGuard
• Export metrics as JSON for analysis

Tech Stack

• Framework: TanStack Router (React) + Vite
• Language: TypeScript
• Markdown: Streamdown v2
• Styling: Tailwind CSS v4
• Package Manager: pnpm
• Node.js: 24+
• Deployment: Vercel

Getting Started

Prerequisites

• Node.js 24+
• pnpm 9+

Installation

# Clone the repository
git clone <repo-url>
cd try-streamdown

# Install dependencies
pnpm install

# Start development server
pnpm dev

Open http://localhost:3000 to view the app.

Build

pnpm build
pnpm preview

Project Structure

src/
├── routes/              # TanStack Router pages
│   ├── __root.tsx       # Root layout
│   ├── index.tsx        # Home page
│   ├── streamdown.tsx   # Streamdown test page
│   └── baseline.tsx     # Baseline comparison page
├── components/
│   ├── StreamdownRenderer.tsx   # Streamdown with plugins
│   ├── BaselineRenderer.tsx     # react-markdown renderer
│   ├── MarkdownRunner.tsx       # Scenario driver
│   └── Panels/
│       ├── PerfPanel.tsx        # Metrics display
│       └── ControlPanel.tsx     # Test controls
├── lib/
│   ├── perf.ts          # Performance measurement utilities
│   ├── observers.ts     # MutationObserver for duplicates
│   └── stream.ts        # Streaming simulation
└── samples/
    ├── long-static.md   # Comprehensive test document
    └── long-stream.txt  # Streaming test content

Test Scenarios

Static Rendering

• One-time render of complete Markdown
• Tests initial rendering performance
• Measures first content time and total render duration

Streaming Rendering

• Simulates LLM token-by-token output
• Configurable chunk size (8-256 chars)
• Configurable delay (0-200ms)
• Tests incremental rendering and idempotency

Metrics

Performance Metrics

• Total Duration: Time from start to final render
• First Content: Time to first visible content
• Commit Count: Number of React commits per component

Duplicate Detection

• Dup Mermaid: Count of duplicate SVG injections
• Dup Code: Count of duplicate syntax highlighting

Expected Results

• ✅ Mermaid duplicates: 0
• ✅ Code duplicates: 0
• ✅ Commit counts: Minimal and predictable

Sample Content

The test documents include:

• 22 code blocks: TypeScript, JavaScript, Python, Rust, Go, SQL, Bash, YAML, JSON, SCSS, TSX
• 12 Mermaid diagrams: Flowcharts, sequence diagrams, state diagrams, class diagrams, Gantt charts, ER diagrams, pie charts, git graphs

Commands

Command	Description
pnpm dev	Start development server
pnpm build	Build for production
pnpm preview	Preview production build
pnpm typecheck	Run TypeScript type checking

Deployment

Vercel (Recommended)

1. Connect your GitHub repository to Vercel
2. Vercel auto-detects the Vite framework
3. Deployments happen automatically on push

Manual Deployment

pnpm dlx vercel

Configuration

Stream Options

In the test pages, you can configure:

• Chunk Size: Number of characters per streaming chunk
• Delay: Milliseconds between chunks

Themes

The app supports light/dark mode based on system preference, with a manual toggle in the header.

Exporting Results

1. Run a test scenario
2. Click "Export JSON" in the performance panel
3. Reports are saved as report-{timestamp}.json

License

MIT License © 2026 WTW0313