AlgorithmsBrowser and DOMRuns in your browserReviewed October 1, 2026

List Virtualization (Windowing) Visualizer

Render only the rows that are visible, so huge lists stay fast. Interactive step-by-step animation with JavaScript code, complexity and front-end use cases.

Localprivate by defaultFastno sign-up path

Browser and DOMTime: O(visible rows)Space: O(visible rows)

Rows that fit on screenExtra rows rendered above and below

30 items

Scroll position

scrollTop = 0px

Items in the DOM

6 of 30

Rendered range

1 to 6

Step 1 / 15

A long list can have thousands of rows. Virtualization renders only the rows in view (green) plus a few extra (blue); the rest (grey) are not in the DOM at all.

checking
found / in view
ruled out

JavaScript

1function getVisibleRange(scrollTop, viewportHeight, itemHeight, total, overscan = 2) {
2  const first = Math.floor(scrollTop / itemHeight);
3  const last = Math.ceil((scrollTop + viewportHeight) / itemHeight);
4  const start = Math.max(0, first - overscan);
5  const end = Math.min(total, last + overscan);
6  return [start, end];
7}

Tip: use the arrow keys to step and the space bar to play or pause.

Loading animation...

List Virtualization (Windowing) Visualization and Animation

Render only the rows that are visible, so huge lists stay fast. Read the scroll position and the height of one row. Calculate the first and last visible row, plus a few extra (overscan). Render only those rows and position them with padding or transforms. Time complexity: O(visible rows). Space complexity: O(visible rows). Long feeds, tables and dropdowns with thousands of items. This is the idea behind react-window and TanStack Virtual.

How to use List Virtualization (Windowing) Visualizer

Read the scroll position and the height of one row.
Calculate the first and last visible row, plus a few extra (overscan).
Render only those rows and position them with padding or transforms.
Press Play, or step through with the arrow buttons and change the input to see how it reacts.

Questions

What is List Virtualization (Windowing)?

Render only the rows that are visible, so huge lists stay fast.

What is the time complexity of List Virtualization (Windowing)?

Time: O(visible rows). Space: O(visible rows).

Where do front-end developers use List Virtualization (Windowing)?

Long feeds, tables and dropdowns with thousands of items. This is the idea behind react-window and TanStack Virtual.

Does this upload my data?

No. This converter runs in your browser for ordinary use, so the input is not sent to a backend by this tool.

Related tools

Keep working without searching again.

Sorting