Streaming Markdown Since v4.1.0

Markdown rendered as it streams, with incomplete syntax closed on every chunk.

Usage

Requires marked and remend. Fenced code renders as a Code Block, which brings its own packages and provider.

Pass the accumulated text on every chunk, not the chunk alone, along with whether the reply is still streaming. It works with any provider.

import { BuiStreamingMarkdown } from '@/bui/ui/streaming-markdown';

<div buiStreamingMarkdown [text]="text()" [streaming]="streaming()"></div>

Example

The received text often ends halfway through bold, inline code or a link. Each chunk is completed before parsing, so formatting appears right away instead of flashing raw markers.

<div buiMessage>
  <div buiMessageContent>
    <div buiStreamingMarkdown [text]="text()" [streaming]="streaming()"></div>
  </div>
</div>

Streaming

While streaming is true, unclosed emphasis, inline code, links and other syntax are closed before each parse. When streaming ends, the text is parsed as is.

Fenced code is highlighted as it grows, and its copy button stays disabled until the fence is complete.

API Reference

buiStreamingMarkdown

Renders the accumulated markdown as it streams.