logo svelte /virtual list v0.5.14

Install Svelte Virtual List

Install @humanspeak/svelte-virtual-list in a Svelte 5 project:

npm install @humanspeak/svelte-virtual-list
npm install @humanspeak/svelte-virtual-list

The package has zero runtime dependencies, includes TypeScript definitions, and supports SvelteKit SSR.

Other package managers

# pnpm
pnpm add @humanspeak/svelte-virtual-list

# yarn
yarn add @humanspeak/svelte-virtual-list
# pnpm
pnpm add @humanspeak/svelte-virtual-list

# yarn
yarn add @humanspeak/svelte-virtual-list

Render your first virtual list

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

    const items = Array.from({ length: 10_000 }, (_, id) => ({ id }))
</script>

<VirtualList {items}>
    {#snippet renderItem(item)}
        <div>Item {item.id}</div>
    {/snippet}
</VirtualList>
<script lang="ts">
    import VirtualList from '@humanspeak/svelte-virtual-list'

    const items = Array.from({ length: 10_000 }, (_, id) => ({ id }))
</script>

<VirtualList {items}>
    {#snippet renderItem(item)}
        <div>Item {item.id}</div>
    {/snippet}
</VirtualList>

Next, open the basic list example or continue to the props reference.