virtual

TanStack Virtual is a JavaScript and TypeScript library for displaying very long lists, tables, or grids on a web page without slowing down the browser. The core idea is called virtualization: instead of putting all ten thousand rows of your data into the page at once, the library only renders the items that are currently visible on screen. As the user scrolls, items outside the viewport are removed from the DOM and new ones are added, creating the appearance of a complete list without the performance cost of actually building one.

The library is described as headless, which means it handles the logic of which items should be visible and where they should be positioned, but it does not produce any HTML or CSS itself. You bring your own markup and styling. This makes it flexible and avoids conflicts with whatever design system or component library you are already using.

TanStack Virtual works with several popular JavaScript frameworks through official adapter packages. There are adapters for React, Vue, Solid, and Svelte, as well as a framework-agnostic core package for use in plain JavaScript or TypeScript projects. The library supports vertical scrolling (standard lists), horizontal scrolling, and two-dimensional grid layouts, all through the same core abstraction. Items can have dynamic or measured heights rather than requiring all rows to be the same fixed size. Sticky item support and window-level scrolling are also included.

The package is small, around 10 to 15 kilobytes when compressed, and targets smooth 60-frames-per-second scrolling. It is part of the broader TanStack ecosystem, which includes other headless utilities for data tables, routing, forms, and server-state management. The project is open source, accepts contributions through GitHub, and has a community Discord. Documentation lives at tanstack.com/virtual.