# LLM Streaming > Simulated LLM token streaming with markdown rendering inside a virtual chat viewport — height stability during message growth in Svelte 5. **Source:** [https://virtualchat.svelte.page/examples/streaming](https://virtualchat.svelte.page/examples/streaming) **Markdown mirror:** [https://virtualchat.svelte.page/examples/streaming.md](https://virtualchat.svelte.page/examples/streaming.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: llm streaming. Simulated token-by-token streaming with markdown rendering and a virtualized viewport that stays pinned as message content grows. **Metadata:** tag: `STREAMING` | mode: `follow-bottom` ### Notes - LLMs stream tokens via SSE. As each token arrives, the message content grows and ResizeObserver detects the height change automatically. - Height corrections are batched per animation frame — not per token. The viewport stays pinned to bottom with zero jitter. - Markdown rendering is powered by [@humanspeak/svelte-markdown](https://markdown.svelte.page) in streaming mode (~1.6ms avg per update) — code blocks, tables, and lists all render live without scroll disruption. - Track token costs across providers with [ModelPricing.ai](https://modelpricing.ai). Need a general-purpose virtual list? Try [@humanspeak/svelte-virtual-list](https://virtuallist.svelte.page). ### Source #### StreamingChat.svelte Source file: [src/lib/examples/streaming/demos/StreamingChat.svelte](https://github.com/humanspeak/svelte-virtual-chat/blob/main/docs/src/lib/examples/streaming/demos/StreamingChat.svelte) ```svelte
file · StreamingChat.svelte progress {progress}% tokens {tokenCount}/{totalTokens || '—'} speed {tokensPerSecond} tok/s {#if isStreaming}● LIVE{:else}○ IDLE{/if}
msg.id} estimatedMessageHeight={100} followBottomThresholdPx={64} overscan={4} onDebugInfo={(info: SvelteVirtualChatDebugInfo) => (debugInfo = info)} containerClass="h-[500px]" viewportClass="h-full" testId="streaming-chat" > {#snippet renderMessage(message: Message)}
{message.role === 'user' ? 'you' : 'assistant'} {formatTime(message.timestamp)} {#if message.isStreaming} ● streaming {/if}
{#if message.role === 'assistant' && message.content}
{:else}
{message.content}
{/if}
{/snippet}
{#if debugInfo}
total · {debugInfo.totalMessages}
in-dom · {debugInfo.renderedCount}
measured · {debugInfo.measuredCount}
range · {debugInfo.startIndex}–{debugInfo.endIndex}
height · {Math.round(debugInfo.totalHeight)}px
following · {debugInfo.isFollowingBottom ? 'yes' : 'no'}
{/if}
```