tanstack-virtual

Provide headless virtualization logic for rendering visible items in large lists.

5|Updated Jan 20, 2026

Search Tags:#ui #performance #frontend #optimization #rendering #virtualization

Ready to run

npx skills add https://github.com/mohamedgshoaib/reway --skill tanstack-virtual-mohamedgshoaib

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tanstack-virtual
Source: https://github.com/mohamedgshoaib/reway/tree/main/.agents/skills/tanstack-virtual
Command: npx skills add https://github.com/mohamedgshoaib/reway --skill tanstack-virtual-mohamedgshoaib

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the performance bottleneck of rendering massive datasets in web applications by ensuring only the visible items are processed and rendered in the DOM.

Core Features & Use Cases

Efficient Rendering: Maintains 60FPS performance even with thousands of items by using absolute positioning and windowing.
Framework Agnostic: Provides core logic compatible with React, Vue, Solid, Svelte, Lit, and Angular.
Use Case: Use this to render a list of 10,000 items in a dashboard or data table without causing browser lag or memory bloat.

Quick Start

Use the tanstack-virtual skill to implement a virtualized list for a large dataset by configuring the useVirtualizer hook with your scroll container and estimated item size.

Frequently Asked Questions about tanstack-virtual

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I render large lists without causing browser lag?▼

List virtualization solves browser lag by rendering only visible items within large lists. By using absolute positioning and windowing, it maintains 60FPS performance even with thousands of items in a dashboard or data table.

What is headless virtualization logic for frontend UI?▼

Headless virtualization logic provides core windowing mechanics without dictating UI structure. It calculates which items are visible and requires integration with a framework-specific adapter to manage DOM nodes and scroll positioning efficiently.

Can I use this virtualization logic with Vue, Svelte, or Angular?▼

Yes, the framework-agnostic core logic is compatible with React, Vue, Solid, Svelte, Lit, and Angular. You must integrate it with your specific framework adapter to handle DOM nodes and scroll positioning.

How to implement a virtualized list with dynamic item heights?▼

Configure the virtualizer hook with your scroll container and estimated item size. The core logic supports complex UI scenarios including dynamic item heights, horizontal scrolling, and infinite loading patterns.

Does list virtualization support infinite loading patterns?▼

Yes, list virtualization supports infinite loading patterns alongside horizontal scrolling and dynamic item heights. It handles these complex UI scenarios while ensuring only visible elements are processed and rendered in the DOM.