Interactivity

Streamdown enhances the user experience by adding interactive buttons to images, tables, and code blocks. These controls allow users to easily copy content to their clipboard or download it for later use, making your markdown content more practical and user-friendly.

Overview

Streamdown automatically adds interactive controls to:

• Images - Download button on hover
• Tables - Copy buttons for CSV/TSV formats and download buttons for CSV/Markdown formats
• Code Blocks - Copy and download buttons
• Mermaid Diagrams - Copy, download, and fullscreen buttons

All interactive controls:

• Appear on hover (desktop) or are always visible (mobile)
• Provide visual feedback on successful actions
• Are automatically disabled during streaming when isAnimating={true}
• Can be customized or disabled via the controls prop

Image Buttons

Download Images

Every image rendered by Streamdown includes a download button that appears on hover. A download button will be shown for images in the bottom-right corner on hover. Streamdown will automatically detect the image format and save it with the correct extension. The image's alt text will be used as the default filename.

Table Buttons

Copy Tables

Tables include a copy button that opens a dropdown menu allowing users to copy the table data in multiple formats. The copy button will be shown for tables in the top-right corner on hover. Users can choose to copy the table as CSV or TSV (tab-separated values). The table is also copied as HTML for rich pasting into applications that support it.

Download Tables

Tables can be downloaded in two formats: CSV and Markdown. The download button will be shown for tables in the top-right corner on hover. The download button opens a dropdown menu with options to download as CSV or Markdown, making it easy to export table data for use in spreadsheets or documentation.

Code Block Buttons

Copy Code

Every code block includes a copy button that appears on hover. The copy button will be shown for code blocks in the top-right corner on hover. The copy button will copy the raw code without syntax highlighting. It will also show a checkmark for 2 seconds after successful copy. It will be disabled during streaming to prevent copying incomplete code.

Download Code

Code blocks also include a download button that appears on hover. The download button will be shown for code blocks in the top-right corner on hover. The download button will download the code with the appropriate file extension based on language. It will also use "file.[extension]" as the filename. It will preserve formatting and indentation.

Mermaid Diagram Buttons

Copy Diagrams

Mermaid diagrams include a copy button that allows users to copy the diagram source code. The copy button will be shown for Mermaid diagrams in the top-right corner on hover. The copy button will copy the raw Mermaid syntax for easy sharing and editing.

Download Diagrams

Mermaid diagrams can be downloaded as SVG files. The download button will be shown for Mermaid diagrams in the top-right corner on hover. The download button will download the rendered diagram as an SVG file. It will use "diagram.svg" as the default filename.

Fullscreen View

Mermaid diagrams include a fullscreen button for better viewing of complex diagrams. The fullscreen button will be shown for Mermaid diagrams in the top-right corner on hover. The fullscreen button will open the diagram in a modal overlay for detailed inspection. Users can press Escape or click outside to close the fullscreen view.