cnc-virtual-list
Overview
Spec
Examples
Playground
Styling
A windowed list for large, uniformly sized collections. It renders only enough slotted rows to cover the visible area while preserving the full scroll height. Collections below 30 items are rendered directly without resize or scroll observers.
Quick start
Bind an array to items. Slotted content receives the current item and
visible-window index, so ordinary bindings can render each row.
<cnc-virtual-list
$items="Array(1000).fill().map((_, i) => ({ id: i, text: 'Item ' + i }))"
class="h-96 border"
>
<div class="border-b px-4 py-3" x-text="item.text"></div>
</cnc-virtual-list>Slot scope
The default slot receives item and index. Keep rows uniformly sized;
use cnc-virtual-rows when row heights vary independently.