Configuration

Customize nstreamdown's behavior and appearance to match your application's needs.

StreamdownConfig

The Streamdown component accepts a config prop with the following options:

streamdown-config.ts

interface StreamdownConfig {
  /**
   * Mode: 'streaming' for real-time updates, 'static' for complete markdown
   * @default 'static'
   */
  mode?: 'streaming' | 'static';
  
  /**
   * Whether to show copy/download controls on code blocks and tables
   * @default true
   */
  controls?: boolean;
  
  /**
   * Whether to show the animated caret during streaming
   * @default true (when mode is 'streaming')
   */
  showCaret?: boolean;
  
  /**
   * Custom caret character
   * @default '▋'
   */
  caret?: string;
}

Mode Options

Static Mode

Use static mode when you have complete markdown content that doesn't change:

<Streamdown
  [content]="completeMarkdown"
  [config]="{ mode: 'static' }"
/>

Streaming Mode

Use streaming mode for AI-generated content that arrives word-by-word:

<Streamdown
  [content]="streamingContent"
  [config]="{ mode: 'streaming', showCaret: true }"
/>

Controls

Enable or disable interactive controls on code blocks and tables:

<!-- Show copy and download buttons -->
<Streamdown [content]="markdown" [config]="{ controls: true }" />

<!-- Hide all controls -->
<Streamdown [content]="markdown" [config]="{ controls: false }" />

When controls are enabled:

Code blocks: Copy to clipboard and download as file buttons
Tables: Copy as text and export as CSV buttons

Custom Caret

Customize the streaming caret character:

<!-- Default caret -->
<Streamdown [content]="content" [config]="{ showCaret: true }" />

<!-- Custom caret -->
<Streamdown [content]="content" [config]="{ showCaret: true, caret: '|' }" />

<!-- Blinking cursor style -->
<Streamdown [content]="content" [config]="{ showCaret: true, caret: '_' }" />

Full Example

ai-chat.component.ts

import { Component } from '@angular/core';
import { Streamdown, StreamdownConfig } from '@nstudio/nstreamdown';

@Component({
  selector: 'app-ai-chat',
  template: `
    <Streamdown [content]="response" [config]="config" />
  `,
  imports: [Streamdown],
})
export class AiChatComponent {
  response = '';
  
  config: StreamdownConfig = {
    mode: 'streaming',
    controls: true,
    showCaret: true,
    caret: '▋',
  };

  async sendMessage(message: string) {
    this.response = '';
    
    // Connect to your AI API
    const stream = await fetch('/api/chat', {
      method: 'POST',
      body: JSON.stringify({ message }),
    });

    const reader = stream.body?.getReader();
    if (!reader) return;

    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      
      const text = new TextDecoder().decode(value);
      this.response += text;
    }
  }
}