VirtualizedUI

virtualized UIGrid- and UIListLayout

Installation

install with wally

get from creator store

edit showcase game

Example

play showcase game

https://github.com/user-attachments/assets/0bb80816-c83c-4ea3-a037-220a2298b65f

See example/native.luau for a full setup, and example/benchmark.luau for the performance + correctness harness.

Info

VirtualizedUI is distributed as a Wally package and as a plain Luau module.

Virtual List & Grid, that have all the properties one can dream of from UIListLayout & UIGridLayout. Works on every viewport size.

Install the package with Wally or copy src/init.luau into your game. Create an issue for feedback & improvements.

• made with & for the new type solver
• fully strict typed
• optimized & instant up to engine limits

Batching mutations

Every mutation (AddItem, RemoveItem, SortData, SetLayout, ReloadData) triggers one synchronous update. When applying many at once, wrap them so only a single update runs:

grid:BeginUpdates()
for _, item in newItems do
	grid:AddItem(item)
end
grid:EndUpdates() -- one update, not one per item

BeginUpdates/EndUpdates are reference-counted, so nesting is safe.

Data mutation contract

The grid rebinds a frame's data only when it recycles the frame or when you tell it to. If you mutate an item in place (e.g. data[i].label = "...") without adding/removing/reloading, call Refresh() (or ReloadData()) to push the change to any on-screen frame:

data[i].label = "updated"
grid:Refresh()

Performance

The visible-item update skips frames whose position and bound data can't have changed, so a scroll that crosses one row rebinds only the items that actually moved instead of every visible item. Canvas size is only written when it actually changes. example/benchmark.luau is a client-side harness (needs PlayerGui) that times a scroll sweep and sub-row jitter while asserting frame positions, indices, and data stay correct across every mutation path:

require(game.ReplicatedStorage.VirtualizedUIBenchmark).run()
-- or: run({ itemCount = 10000, steps = 300 })