Static Mode

Static mode is designed for rendering pre-generated markdown content, such as blog posts, documentation, or other static pages where content is already complete.

When to Use Static Mode

Use static mode when:

• Rendering static markdown content (e.g., blog posts, docs)
• Content is pre-generated and not streaming
• You need improved fallback rendering for code blocks
• Streaming optimizations are unnecessary

Basic Usage

Enable static mode by setting the mode prop to "static":

import { Streamdown } from 'streamdown';

export default function BlogPost({ content }: { content: string }) {
  return <Streamdown mode="static">{content}</Streamdown>;
}

How It Works

Static mode skips streaming-related optimizations:

• No block parsing: Content is rendered as a single unit instead of being split into blocks
• No incomplete markdown handling: Assumes markdown is complete and well-formed
• Improved code blocks: Uses optimized rendering for static code blocks
• Simpler rendering: Direct ReactMarkdown rendering without streaming overhead

Configuration

All standard Streamdown props work in static mode, including:

• Custom components
• Syntax highlighting themes
• Mermaid diagrams
• Plugin configuration

<Streamdown
  mode="static"
  shikiTheme={['github-light', 'github-dark']}
  mermaidConfig={{ theme: 'neutral' }}
>
  {content}
</Streamdown>