description: Lightweight, framework-agnostic virtual list engine with variable heights, smooth scrolling, and zero dependencies. package: virtualit category: ui-performance keywords: [virtual-list, virtualization, windowing, scroll, performance, large-lists] related: [dragit, craftit, buildit] exports: [createVirtualizer, Virtualizer]

@vielzeug/virtualit

Lightweight, framework-agnostic virtual list engine with variable heights, smooth scrolling, and zero dependencies.

Package: @vielzeug/virtualit  ·  Category: Ui-performance

Key exports: createVirtualizer, Virtualizer

When to use: Lightweight, framework-agnostic virtual list engine with variable heights, smooth scrolling, and zero dependencies.

Related: @vielzeug/dragit · @vielzeug/craftit · @vielzeug/buildit

@vielzeug/virtualit is part of Vielzeug and ships as a zero-dependency TypeScript package with ESM+CJS output.

Installation

pnpm add @vielzeug/virtualit
npm install @vielzeug/virtualit
yarn add @vielzeug/virtualit

Quick Start

import { createVirtualizer } from '@vielzeug/virtualit';

const scrollEl = document.querySelector<HTMLElement>('.scroll-container')!;

const virt = createVirtualizer(scrollEl, {
  count: items.length,
  estimateSize: 36,
  onChange: (virtualItems, totalSize) => {
    spacer.style.height = `${totalSize}px`;
    list.innerHTML = '';

    for (const item of virtualItems) {
      const row = document.createElement('div');
      row.style.cssText = `position:absolute;top:${item.start}px;left:0;right:0;height:${item.size}px;`;
      row.textContent = items[item.index].label;
      list.appendChild(row);
    }
  },
});

// Later:
virt.destroy();

Documentation

• Overview
• Usage Guide
• API Reference
• Examples

License

MIT © Helmuth Saatkamp — part of the Vielzeug monorepo.