SvelteVirtualChat

A high-performance virtual chat viewport for Svelte 5. Purpose-built for LLM conversations, support chat, and any message-based UI.

Basic Chat

Simple chat interface with send/receive, follow-bottom behavior, and scroll-away detection.

LLM Streaming

Token-by-token streaming with markdown rendering. Demonstrates height stability during message growth.

History Loading

Scroll up to load older messages with anchor preservation. No viewport jump on prepend.

Quick Start

npm install @humanspeak/svelte-virtual-chat

<script lang="ts">
  import SvelteVirtualChat from '@humanspeak/svelte-virtual-chat'

  let messages = $state([...])
</script>

<SvelteVirtualChat
  {messages}
  getMessageId={(msg) => msg.id}
  estimatedMessageHeight={72}
  containerClass="h-[600px]"
  viewportClass="h-full"
>
  {#snippet renderMessage(message, index)}
    <div class="p-4">{message.content}</div>
  {/snippet}
</SvelteVirtualChat>