VList

Ultra-efficient virtual list with constant memory. Dimension-agnostic architecture. Tree-shakeable features. 120+ FPS sustained.

v1.2.0 7.7 KB base • 12.3 KB typical Zero Dependencies 0.1-0.3 MB @ 1M items 120+ FPS sustained

Try Examples → Read the docs → GitHub

npm install @floor/vlist

Performance That Matters

Verified benchmarks show VList's exceptional efficiency. All tests run live in your browser.

Constant Memory

Just 0.24 MB at 10K items, scales to 0.1-0.3 MB even at 1M+ items

Fast Renders

Initial render in ~8.5ms, optimized for instant user feedback

Smooth Scrolling

Perfect 120 FPS sustained performance, buttery smooth at any scale

View Full Comparison →

Features

⚡

Blazing Fast

DOM recycling, RAF batching, O(log n) lookups — 120+ FPS sustained

💾

Constant Memory

Just 0.24 MB at 10K items, scales to 0.1-0.3 MB even at 1M+ items — true O(1) memory complexity

↔️

Dimension Agnostic

Vertical & horizontal orientations with semantic API — grid, groups, all features work both ways

📏

Variable Sizes

Per-item size function with DOM measurement support

♾️

Infinite Scroll

Async adapter with placeholders, velocity-aware loading

🔀

Reverse Mode

Chat UIs — start at bottom, prepend history, auto-scroll

☑️

Selection

Single & multi-select with full keyboard navigation

🔲

Grid Layout

Virtualized 2D grid in vertical or horizontal orientation

📌

Sticky Headers

Grouped lists with sticky headers in any orientation

🗜️

Compression

Handle millions of items by compressing scroll space

Explore

Examples

13 interactive examples — from basic lists to million-item stress tests

Browse examples →

Documentation

API reference, configuration, events, methods, styling, and more

Read docs →

Benchmarks

Live performance tests — scroll FPS, render time, memory stability, bundle size

Run benchmarks →

Tutorials

Step-by-step guides to learn vlist from beginner to advanced

See →

Quick Start

import { vlist } from "@floor/vlist"
const list = vlist({
container: "#list",
item: {
height: 48,
template: (item) => `<div>${item.name}</div>`
}
}).build()
list.setItems(
Array.from({ length: 10_000 }, (_, i) => ({
id: i,
name: `Item ${i}`
}))
)

Examples (13)

Basic Simple list with 10K items — vanilla JavaScript, zero dependencies → Controls Multi-selection, keyboard navigation, scroll events → Photo Album Responsive image grid — available in JavaScript, React, Vue, Svelte → File Browser Finder-like browser with grid/list views → Large List 100K–5M items with compression → Velocity Loading Intelligent async loading — pauses during fast scrolling → Horizontal Sideways scrolling carousel — 10K items with smooth navigation → Contact List A–Z contact list with sticky section headers → Scroll Restore Save & restore scroll position across navigations → Window Scroll Full-page scrolling — uses document body instead of container → Variable Heights Dynamic sizing — automatically measures each item's height → Messaging App Chat UI — reverse mode, prepend history, auto-scroll → Wizard Nav Step-by-step navigation — scroll wheel disabled, button controls only →