whatisgithub

What is virtual?

tanstack/virtual — explained in plain English

Analysis updated 2026-06-24

6,892TypeScriptAudience · developerComplexity · 2/5Setup · moderate

In one sentence

A headless JavaScript library that makes scrolling through massive lists, tables, or grids fast by only rendering items visible on screen, with adapters for React, Vue, Svelte, Solid, and plain JS.

Mindmap

mindmap
  root((tanstack virtual))
    What it does
      Virtual list rendering
      Only visible items
      Smooth scrolling
    Supported Layouts
      Vertical lists
      Horizontal lists
      2D grids
    Framework Adapters
      React
      Vue
      Svelte
      Solid
      Plain JS
    Key Features
      Dynamic item heights
      Sticky items
      Window scrolling
    Audience
      Frontend developers
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Display a table with tens of thousands of rows smoothly without freezing the browser.

USE CASE 2

Build an infinite scrolling list in React, Vue, Svelte, or Solid where items have variable heights.

USE CASE 3

Implement a two-dimensional virtualized grid for large datasets like spreadsheets or photo galleries.

What is it built with?

TypeScriptReactVueSvelteSolid

How does it compare?

tanstack/virtualbistutu/fluentreadhospitalrun/hospitalrun-frontend
Stars6,8926,8896,886
LanguageTypeScriptTypeScriptTypeScript
Setup difficultymoderateeasyhard
Complexity2/51/54/5
Audiencedevelopergeneraldeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 30min

Headless, you bring your own HTML and CSS, layout and styling are entirely your responsibility.

So what is it?

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.

Copy-paste prompts

Prompt 1
Using TanStack Virtual with React, show me how to render a list of 50,000 items where each row has a dynamic height based on its content.
Prompt 2
Set up a horizontally scrolling virtualized list with TanStack Virtual in a Vue 3 app, show me the full component.
Prompt 3
Build a two-dimensional virtualized grid in plain TypeScript using the @tanstack/virtual-core package without any framework.
Prompt 4
Using TanStack Virtual with Svelte, implement an infinite scroll list that loads more data when the user reaches the bottom.

Frequently asked questions

What is virtual?

A headless JavaScript library that makes scrolling through massive lists, tables, or grids fast by only rendering items visible on screen, with adapters for React, Vue, Svelte, Solid, and plain JS.

What language is virtual written in?

Mainly TypeScript. The stack also includes TypeScript, React, Vue.

How hard is virtual to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is virtual for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.