Virtua

Virtua is a framework-agnostic virtualization library that renders only the visible slice of a long list or grid, keeping DOM node counts (and thus memory and layout cost) constant regardless of dataset size. It ships dedicated bindings for React, Vue, Solid, and Svelte on top of a shared framework-independent core, and requires no upfront item-size configuration — it measures rendered items and adapts automatically, which distinguishes it from virtualization libraries that require fixed or precomputed item heights.

What You Get

• VList/VGrid components for virtualized one-dimensional lists and two-dimensional grids
• Zero-config variable item-size support — no need to precompute or declare row/column heights
• Framework bindings for React, Vue, Solid, and Svelte sharing one framework-agnostic core
• A WindowVirtualizer for virtualizing against the browser window scroll instead of an internal scroll container
• SSR-safe rendering (dedicated .ssr.spec test suites per framework) so virtualized lists don’t break server-rendered pages
• A low-level, headless Virtualizer primitive for building fully custom virtualized UI

Common Use Cases

• Rendering large chat histories, social feeds, or activity logs without degrading scroll performance
• Building virtualized data tables or spreadsheet-like grids with variable row/column sizes
• Infinite-scroll product listings or search results where thousands of items may load over time
• Migrating an app already using react-window/react-virtualized that needs variable-height items without manual size measurement

Under The Hood

Architecture — A framework-independent core/ (scroller math, item measurement/caching, resize observation) is consumed by thin per-framework adapter layers (react/, vue/, solid/, svelte/) that translate the core virtualization engine into each framework’s component/reactivity model — Virtualizer.tsx in the React adapter, for example, wraps the shared core and exposes it as a component with refs and effects idiomatic to React. Tech Stack — TypeScript (90% of the codebase) built with Rollup, with Svelte-specific source (4.5%) alongside the TS core; the library is intentionally dependency-free at runtime to keep the ~3kB bundle size, and each framework target is compiled to its own lib/<framework> entry point (virtua/vue, virtua/solid, virtua/svelte). Code Quality — Each component ships colocated .spec.tsx unit tests and a separate .ssr.spec.tsx suite specifically verifying server-side-rendering correctness, plus an e2e/ Playwright suite and stories/ for visual/interaction testing — a notably thorough cross-cutting test strategy for a UI library spanning four frameworks. API Design — The headline design goal is zero-config: <VList>{items.map(...)}</VList> works without declaring item sizes, and the lower-level Virtualizer primitive is available for consumers who need to build fully custom virtualized layouts, giving a clean minimal-to-advanced API progression.