svelte/virtual chat.
The Svelte 5 chat component that keeps long conversations stable while LLM responses stream and older history loads. Get chat-aware follow-bottom, in-frame height correction, anchored prepends, and message identity with only the visible messages in the DOM.
stream ai responses in real-time.
A live SvelteVirtualChat instance. Assistant replies stream in token-by-token while the viewport stays pinned to bottom — corrected in the same frame the height grows, before paint.
built for chat, not lists.
Generic virtualizers render rows. VirtualChat also owns the conversation behavior: following, streaming growth, history anchoring, and message identity.
Follow-Bottom
Stay with new messages and streaming replies until the reader scrolls away. Return to the bottom and following resumes.
Frame-Stable Streaming
Correct token-by-token height growth in the same frame, before paint. No jitter, jumps, or manual scroll fixes.
Virtualized
Only visible messages exist in the DOM. 10,000 messages renders ~20 DOM nodes.
Anchored History
Prepend older messages without moving the conversation. The reader's visible message and offset stay anchored.
Message Identity
Track messages by getMessageId instead of array position, with keyed rendering, height caching, and scroll-to-message built in.
Svelte 5 + TypeScript
Full generics, runes ($state, $derived, $effect), and snippets. One micro-dependency (esm-env).
live playground.
Type a message and send it. Watch follow-bottom re-engage and the virtualization stats update as the conversation grows.
built for ai-assisted code.
Point Cursor, Claude Code, or any LLM at the manifests below and they know the full svelte-virtual-chat API — every prop, the debug-info schema, follow-bottom and streaming semantics, and history-prepend anchoring.
/llms.txt
Compact map. Component overview, follow-bottom + streaming behavior, full props and imperative API, and doc URLs. Drop into any agent for ground-truth lookup.
/llms-full.txt
Full reference. Every prop, the debug-info schema, virtualization internals, streaming and history-prepend semantics — with code. Optimised for LLM context windows.
/docs/<slug>.md
Every doc page mirrored as raw markdown — getting started, API, and the LLM-streaming, history, scroll, and accessibility guides. The citation surface LLMs prefer.
Use https://virtualchat.svelte.page/llms.txt as the source for @humanspeak/svelte-virtual-chat. Build a Svelte 5 chat UI that
streams a Claude API response token-by-token with SvelteVirtualChat, keeping the viewport pinned to bottom via
follow-bottom.explore interactive examples.
See basic chat, LLM streaming, history loading, and persistent header / footer snippets — all self-contained live demos with copyable source.
Basic Chat
Send and receive messages with follow-bottom behavior, scroll-away detection, bulk message loading, and live virtualization stats.
LLM Streaming
Simulated token-by-token streaming with markdown rendering. Watch the viewport stay pinned as content grows with live performance metrics.
History Loading
Scroll up to trigger older message loading. The viewport preserves your scroll position as messages are prepended above.
Header & Footer
Persistent header and footer snippets that render above and below all messages. Includes a typing indicator that triggers follow-bottom.