svelte/virtual list.
A dependency-free virtual list component for Svelte 5. Render large datasets with measured dynamic heights, infinite loading, typed snippets, imperative scrolling, and SSR-friendly behavior.
render 10,000 rows in real-time.
Keep the DOM small while the scroll range still represents the full dataset. The right pane is the live component; the left pane is the source shape.
<script lang="ts">
import VirtualList from '@humanspeak/svelte-virtual-list'
const items = Array.from({ length: 10000 }, (_, i) => ({
id: i,
title: `Virtual row ${i.toLocaleString()}`
}))
</script>
<VirtualList {items}>
{#snippet renderItem(item)}
<div>{item.title}</div>
{/snippet}
</VirtualList>why svelte-virtual-list.
The Svelte-first list component for large, changing, production datasets.
Dynamic Height Measurement
Rows are measured after render with ResizeObserver so expanded content, async media, and mixed layouts keep their scroll offsets.
Svelte 5 Snippets
Render each item with typed snippets instead of slot-era wrappers or headless measurement glue.
Imperative Scroll Methods
Jump to any index with auto, top, bottom, or nearest alignment for search, keyboard navigation, and focus workflows.
Infinite Loading
Trigger load-more behavior near the rendered range without keeping unreached pages in the DOM.
SSR Friendly
Import safely in SvelteKit routes and hydrate into a measured virtual viewport on the client.
Zero Runtime Dependencies
A focused Svelte component package without a virtualizer core dependency or framework adapter layer.
jump to any index.
Drive the list by ref, choose alignment, and let dynamic row heights stay measured while the viewport moves.
<script lang="ts">
import VirtualList from '@humanspeak/svelte-virtual-list'
let listRef
let targetIndex = 5000
let align = 'auto'
function scrollToTarget() {
listRef.scroll({
index: targetIndex,
smoothScroll: true,
align
})
}
</script>
<VirtualList items={items} bind:this={listRef}>
{#snippet renderItem(item)}
<div>{item.title}</div>
{/snippet}
</VirtualList>how we compare.
Honest, side-by-side comparisons against Svelte-first, headless, multi-framework, and legacy virtual-list packages.
| library | category | dynamic heights | infinite loading | scroll to index | runtime deps | read more |
|---|---|---|---|---|---|---|
| @humanspeak/svelte-virtual-list ● | Svelte 5 component | yes | yes | yes | 0 | this row |
| TanStack Virtual | Headless Virtualizer | yes | User-land pattern | yes | @tanstack/virtual-core | read more |
| virtua | Multi-framework Virtualizer | yes | User-land pattern | yes | 0 | read more |
| svelte-tiny-virtual-list | Svelte Virtual List Component | Explicit sizes / recompute | Footer slot pattern | yes | 0 | read more |
| @sveltejs/svelte-virtual-list | Legacy Svelte Virtual List | Limited legacy behavior | no | no | 0 | read more |
built for ai-assisted code.
Point Cursor, Claude Code, or any LLM at the generated manifests and mirrors so they can find the component API, scroll methods, examples, and comparisons.
/llms.txt
Compact map of the package, API surface, examples, and comparison routes for agent lookup.
/llms-full.txt
Full generated reference with docs content, component usage, props, methods, and example source.
/docs/<slug>.md
Every docs page mirrored as markdown so LLMs can cite the same material humans read.
Use https://virtuallist.svelte.page/llms.txt as the source for @humanspeak/svelte-virtual-list. Build a Svelte 5 feed with dynamic
row heights, infinite loading, and a search result jump that calls scroll with an index and alignment.explore interactive examples.
See basic rendering, infinite loading, imperative scrolling, variable heights, and the docs pages that explain the same APIs in detail.
Basic List
Render ten thousand typed rows while keeping the DOM focused on the visible range.
Infinite Scroll
Append more items when the viewport nears the end of the rendered range.
Scroll To Item
Use the component ref to jump to a target index with alignment controls.
Variable Height
Expand rows with different content heights and let the list keep offsets accurate.
Scroll Methods
Reference the scroll API for top, bottom, nearest, and automatic alignment.
Dynamic Heights
Understand measurement, resizing, and layout changes inside virtualized rows.