# Get started with Svelte Virtual List
> A high-performance virtual list component for Svelte 5 that efficiently renders large datasets with minimal memory usage.
**Source:** [https://virtuallist.svelte.page/docs](https://virtuallist.svelte.page/docs)
---
**Svelte Virtual List** is a high-performance virtual list component for Svelte 5 applications that efficiently renders large datasets with minimal memory usage.
## Features
- **Dynamic item height handling** - no fixed height required
- **Automatic resize handling** for dynamic content
- **TypeScript support** with full type safety
- **SSR compatible** with hydration support
- **Svelte 5 runes and snippets** support
- **Programmatic scrolling** with the `scroll` method
- **Infinite scroll** support with `onLoadMore`
- **Memory-optimized** for 10k+ items
## Installation
```bash
# Using npm
npm install @humanspeak/svelte-virtual-list
# Using pnpm (recommended)
pnpm add @humanspeak/svelte-virtual-list
# Using yarn
yarn add @humanspeak/svelte-virtual-list
```
## Basic Usage
The simplest way to use Svelte Virtual List is to pass an array of items and a render snippet:
```svelte
{#snippet renderItem(item)}
{item.text}
{/snippet}
```
> Live example: [/examples/basic-list](https://virtuallist.svelte.page/examples/basic-list)
The component only renders items that are visible in the viewport, plus a configurable buffer. This means you can render lists with thousands of items without performance issues.
## Variable Heights
One of the key features is automatic handling of variable item heights. Items are measured after rendering and the list automatically adjusts:
> Live example: [/examples/variable-height](https://virtuallist.svelte.page/examples/variable-height)
## Props Reference
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `items` | `T[]` | Required | Array of items to render |
| `defaultEstimatedItemHeight` | `number` | `40` | Initial height estimate used until items are measured |
| `bufferSize` | `number` | `20` | Number of items rendered outside the viewport |
| `debug` | `boolean` | `false` | Enable debug logging and visualizations |
| `containerClass` | `string` | `''` | Class for outer container |
| `viewportClass` | `string` | `''` | Class for scrollable viewport |
| `contentClass` | `string` | `''` | Class for content wrapper |
| `itemsClass` | `string` | `''` | Class for items container |
| `onLoadMore` | `() => void \| Promise` | - | Callback for infinite scroll |
| `loadMoreThreshold` | `number` | `20` | Items from end to trigger `onLoadMore` |
| `hasMore` | `boolean` | `true` | Set to `false` when all data has been loaded |
## Learn More
- [Scroll Methods](/docs/scroll-methods) - Programmatic scrolling API
- [Infinite Scroll](/docs/infinite-scroll) - Loading data on demand
- [Convex Integration](/docs/convex) - Real-time data with Convex