powered by pretextVirtualized lists with heights
Virtualized lists with heights
you compute, not measure.
mugen derives every row’s height arithmetically and renders the same description to the DOM — no measure-on-mount, no layout shift, and exact heights even for rows that never mounted.
O(log n)updates0reflows100krows±1pxvs the DOM
booting the list…
Why it’s different
№ 01
Computed, not measured
Row heights come from pretext — text, font, and width — so there is no measure-on-mount pass and nothing jumps when the list paints.
№ 02
Off-screen exactness
Per-row state lives outside React. Expand a collapsed row at index 9,000 and the scrollbar is correct immediately — without ever mounting it.
№ 03
One source of truth
The same primitive tree is interpreted to measure and rendered to the DOM, so measurement and paint can never desync.
№ 04
Logarithmic at any scale
A Fenwick offset index patches one changed row and finds the visible slice in a logarithm — smooth at a hundred thousand rows.
A list is one contract
import { MugenVList, Text, VStack, useMugenVirtualizer } from '@wingleeio/mugen';
function Inbox({ messages }: { messages: Message[] }) {
const list = useMugenVirtualizer({ items: messages });
return (
<MugenVList
instance={list}
getKey={(m) => m.id}
font="16px Inter"
lineHeight={22}
maxW="3xl"
render={(m) => (
<VStack gap={2} padding={12}>
<Text font="600 15px Inter">{m.author}</Text>
<Text>{m.text}</Text>
</VStack>
)}
/>
);
}