virtua

• Purpose: Virtua is a zero-config, fast, and small (~3kB) virtual list (and grid) component designed for efficient rendering of large datasets. It aims to provide high performance with minimal configuration while handling real-world challenges like dynamic sizing, scroll position adjustments, and cross-browser compatibility (including iOS support).

• Key Features:

  • Zero-config virtualization: Optimized for performance out of the box.
  • Fast: Reduces CPU/GC usage, avoids synchronous layout recalculations, and minimizes visual jumps.
  • Small size: ~3kB gzipped (tree-shakeable), with React support totaling ~5kB gzipped.
  • Flexible: Supports fixed/dynamic sizes, horizontal/reverse scrolling, RTL, mobile, infinite scrolling, scroll restoration, DnD, keyboard navigation, sticky items, and placeholders.
  • Framework agnostic: Works with React, Vue, Solid, and Svelte (with Svelte 5.0+ support).

• Target Audience: Developers needing efficient virtualization for large lists/grids across React, Vue, Solid, or Svelte applications.

• Demo: Live examples available at [https://inokawa.github.io/virtua/](https://inokawa.github.io/virtua/ fa-solid fa-up-right-from-square).

• Comparison: Outperforms alternatives like react-virtuoso, react-window, and @tanstack/react-virtual in features like dynamic sizing, reverse scrolling, and framework support. See the detailed comparison table.

• Documentation: Includes API reference, Storybook examples, and [DeepWiki](https://deepwiki.com/inokawa/virtua fa-solid fa-up-right-from-square) for advanced usage.

• Svelte Support: Explicitly supported via virtua/svelte (requires Svelte ≥5.0). Example:

  <script lang="ts">
    import { VList } from "virtua/svelte";
    const data = Array.from({ length: 1000 }).map((_, i) => sizes[i % 4]);
  </script>
  <VList {data} style="height: 100vh;">
    <!-- items -->
  </VList>