svelte/virtual chat.
A high-performance virtual chat viewport for Svelte 5 — purpose-built for LLM conversations, support chat, and any message-based UI. Only visible messages hit the DOM, with follow-bottom, in-frame streaming correction, and history prepend that never jumps the scroll.
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.
Every feature is a direct response to a real problem in chat UI development.
Follow-Bottom
Viewport stays pinned to the newest message. Scroll away and it stops. Return and it resumes.
LLM Streaming
Height changes from token streaming are batched per frame. No jitter, no jumps, no workarounds.
Virtualized
Only visible messages exist in the DOM. 10,000 messages renders ~20 DOM nodes.
History Prepend
Load older messages at the top. Scroll anchor preservation keeps the user's position stable.
Message-Aware
Uses message IDs for identity. Height caching, scroll-to-message, and keyed rendering 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.