vlist

The virtual list library for every framework. Ultra efficient, batteries-included, and accessible with composable plugins — in 8.0 KB.

v2.1.0 — Changelog · New: tree() plugin — virtualized collapsible trees with async loading, indent guides, and WAI-ARIA treeview keyboard nav.

• Accessible — WAI-ARIA, 2D keyboard navigation, focus recovery, screen-reader DOM ordering
• Zero dependencies — framework-agnostic core, tiny adapters for Vue, Svelte, Solid, React
• 8.0 KB gzipped — composable plugins with perfect tree-shaking
• Constant memory — ~0.1 MB overhead at any scale, from 10K to 1M+ items
• Axis-neutral — vertical and horizontal scrolling through a single code path, all plugins work in both orientations

Install

npm install vlist

Quick Start

import { createVList } from 'vlist'
import 'vlist/styles'

const list = createVList({
  container: '#my-list',
  items: [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' },
  ],
  item: {
    height: 48,
    template: (item) => `<div>${item.name}</div>`,
  },
})

Add plugins as the second argument:

import { createVList, grid, selection } from 'vlist'

const list = createVList({ container: '#app', items, item: { height: 200, template: render } }, [
  grid({ columns: 4, gap: 16 }),
  selection({ mode: 'multiple' }),
])

Plugins

| Plugin | Size | Description | |--------|------|-------------| | Base | 7.9 KB | Virtualization, ARIA, keyboard nav, gap, padding | | data() | +4.6 KB | Lazy loading with velocity-aware fetching | | selection() | +2.4 KB | Single/multiple selection with 2D keyboard nav | | scale() | +3.9 KB | 1M+ items via scroll compression | | groups() | +3.7 KB | Sticky/inline headers with async group discovery | | autosize() | +0.8 KB | Auto-measure items via ResizeObserver | | scrollbar() | +2.0 KB | Custom scrollbar UI | | grid() | +2.7 KB | 2D grid layout | | masonry() | +3.6 KB | Pinterest-style masonry with lane-aware keyboard nav | | table() | +6.1 KB | Data table with columns, resize, sort | | page() | +0.8 KB | Window-level scrolling | | sortable() | +2.9 KB | Drag-and-drop reordering with auto-scroll | | snapshots() | +1.3 KB | Scroll position save/restore | | transition() | +1.8 KB | FLIP-based enter/exit animations for insert & remove |

Framework Adapters

| Framework | Package | Size | |-----------|---------|------| | Vue | vlist-vue | 0.6 KB | | Svelte | vlist-svelte | 0.5 KB | | SolidJS | vlist-solidjs | 0.5 KB | | React | vlist-react | 0.6 KB |

Docs & Examples

18 interactive examples, full API reference, tutorials, and live benchmarks → vlist.io

Migrating from v1

v2 is a ground-up rewrite — simpler API, 55% smaller base bundle, zero-allocation scroll path. Full announcement →

| v1 | v2 | |----|-----| | vlist(config).use(withGrid()).build() | createVList(config, [grid()]) | | withGrid, withSelection, … | grid, selection, … | | VListFeature | VListPlugin | | BuilderContext | PluginContext | | .vlist-items | .vlist-content |

The instance API (setItems, scrollToIndex, on, destroy) is unchanged.

License

MIT — Built by Floor IO

Acknowledgments

Thanks to Alexander Klaiber for graciously transferring the vlist package name on npm.