back to home

TanStack / virtual

🤖 Headless UI for Virtualizing Large Element Lists in JS/TS, React, Solid, Vue and Svelte

6,712 stars
425 forks
114 issues
TypeScriptJavaScriptHTML
Chat with CodebaseArchitecture ScanSecurity AuditExplain Codebase

AI Architecture Analysis

This repository is indexed by RepoMind. By analyzing TanStack/virtual in our AI interface, you can instantly generate complete architecture diagrams, visualize control flows, and perform automated security audits across the entire codebase.

Our Agentic Context Augmented Generation (Agentic CAG) engine loads full source files into context, avoiding the fragmentation of traditional RAG systems. Ask questions about the architecture, dependencies, or specific features to see it in action.

Click here to launch the interactive analysis workspace

Embed this Badge

Showcase RepoMind's analysis directly in your repository's README.

[![Analyzed by RepoMind](https://img.shields.io/badge/Analyzed%20by-RepoMind-4F46E5?style=for-the-badge)](https://repomind-ai.vercel.app/repo/TanStack/virtual)
Preview:Analyzed by RepoMind

Repository Summary (README)

Preview
<div align="center"> <img src="./media/header_virtual.png" alt="Tanstack Virtual"> </div> <br /> <div align="center"> <a href="https://npmjs.com/package/@tanstack/virtual-core" target="\_parent"> <img alt="npm downloads" src="https://img.shields.io/npm/dm/@tanstack/virtual-core.svg" /> </a> <a href="https://github.com/tanstack/virtual" target="\_parent"> <img alt="github stars" src="https://img.shields.io/github/stars/tanstack/virtual.svg?style=social&label=Star" /> </a> <a href="https://bundlephobia.com/result?p=@tanstack/virtual-core@latest" target="\_parent"> <img alt="bundle size" src="https://badgen.net/bundlephobia/minzip/@tanstack/virtual-core@latest" /> </a> </div> <div align="center"> <a href="#badge"> <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg"> </a> <a href="https://bestofjs.org/projects/tanstack-virtual"> <img alt="Best of JS" src="https://img.shields.io/endpoint?url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=TanStack%2Fvirtual%26since=daily" alt="Best of JS"/> </a> <a href="https://twitter.com/tan_stack"> <img src="https://img.shields.io/twitter/follow/tan_stack.svg?style=social" alt="Follow @TanStack"/> </a> </div> <div align="center">

Become a Sponsor!

</div>

TanStack Virtual

A headless, framework‑agnostic virtualization library for rendering massive lists, grids, and tables at 60FPS while giving you full control over markup and styles.

  • Framework‑agnostic & headless
  • Virtualizes vertical, horizontal & grid layouts with a single hook/function
  • Lightweight (10–15kb) yet powerful, with dynamic & measured sizing support
  • Smooth 60FPS scrolling with sticky items and window‑scrolling utilities

<a href="https://tanstack.com/virtual" >Read the docs →</a>

Get Involved

Partners

<table align="center"> <tr> <td> <a href="https://www.coderabbit.ai/?via=tanstack&dub_id=aCcEEdAOqqutX6OS"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/coderabbit-dark-CMcuvjEy.svg" height="40" /> <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" /> <img src="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" alt="CodeRabbit" /> </picture> </a> </td> <td padding="20"> <a href="https://www.cloudflare.com?utm_source=tanstack"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/cloudflare-white-DQDB7UaL.svg" height="60" /> <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="60" /> <img src="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="60" alt="Cloudflare" /> </picture> </a> </td> </tr> </table> <div align="center"> <img src="./media/partner_logo.svg" alt="Virtual & you?" height="65"> <p> We're looking for TanStack Virtual Partners to join our mission! Partner with us to push the boundaries of TanStack Virtual and build amazing things together. </p> <a href="mailto:partners@tanstack.com?subject=TanStack Virtual Partnership"><b>LET'S CHAT</b></a> </div>

Explore the TanStack Ecosystem

  • <a href="https://github.com/tanstack/config"><b>TanStack Config</b></a> – Tooling for JS/TS packages
  • <a href="https://github.com/tanstack/db"><b>TanStack DB</b></a> – Reactive sync client store
  • <a href="https://github.com/tanstack/devtools"><b>TanStack DevTools</b></a> – Unified devtools panel
  • <a href="https://github.com/tanstack/form"><b>TanStack Form</b></a> – Type‑safe form state
  • <a href="https://github.com/tanstack/pacer"><b>TanStack Pacer</b></a> – Debouncing, throttling, batching <br/>
  • <a href="https://github.com/tanstack/query"><b>TanStack Query</b></a> – Async state & caching
  • <a href="https://github.com/tanstack/ranger"><b>TanStack Ranger</b></a> – Range & slider primitives
  • <a href="https://github.com/tanstack/router"><b>TanStack Router</b></a> – Type‑safe routing, caching & URL state
  • <a href="https://github.com/tanstack/router"><b>TanStack Start</b></a> – Full‑stack SSR & streaming
  • <a href="https://github.com/tanstack/store"><b>TanStack Store</b></a> – Reactive data store
  • <a href="https://github.com/tanstack/table"><b>TanStack Table</b></a> – Headless datagrids

… and more at <a href="https://tanstack.com"><b>TanStack.com »</b></a>

<!-- Use the force, Luke -->