Navigating Without Rendering: Virtualization in Navix

As Navix's component library grew, some pieces started standing out. In this post we look closely at two of them, NavixPaginatedList and NavixPaginatedGrid — questions are mine, answers belong to Claude reading only the source code.

Virtualization is the technique of only adding to the DOM the elements that are visible on screen and those close to it in a long list — never rendering the rest. In a list of 1000 items where the user sees only 5, creating DOM nodes for 995 items is wasteful; it consumes memory and render time. Virtualization eliminates that cost.

In Navix this technique is implemented in two components: NavixPaginatedList and NavixPaginatedGrid. Both are available in the React and Flutter packages.

Both work by the same logic. viewOffset tracks how many steps have been taken; the range to render is calculated between viewOffset - buffer and viewOffset + visibleCount + buffer. buffer keeps a few items just outside the visible area alive, so when the user presses a key the next item is already rendered. A spacer div holds the place of items outside the render window, and scroll animation is handled via CSS transform.

Strengths

Virtualization and focus management are combined in a single component. Normally these are separate layers and synchronizing them is left to the developer. Here the threshold mechanism manages both at once: when focus approaches the window boundary, both the render window and viewOffset shift automatically.

The groupKey mechanism is a notable detail. When the list leaves the screen and returns, activeIndex and viewOffset are restored from the store. When a user navigates away from a category and comes back, the list picks up exactly where it left off.

The auto-horizontal mode in NavixPaginatedGrid automatically makes the layout decision for a grid with a small number of items. The developer doesn't need to control this manually.

Weaknesses

Every item must be a fixed size. slotWidth is calculated by dividing the container size by visibleCount; variable-sized items don't fit this model.

Because the component can't measure the container size on first mount, containerSize starts at zero. This usually isn't a problem but can be noticeable in animated mount scenarios.

The scrollbar is structurally embedded inside the component. If a completely different scrollbar position or layout is needed, the current structure doesn't allow for it.

Yes, there was. But I got the real answer while writing the code. During development we put together a very detailed demo — seeing concretely what Navix provides there pushed that question to the background.

We went a step further and built the Zenith TV app entirely on top of Navix. Zenith has both a web app and a Tizen OS port, plus a Flutter-written Android port. We were able to deliver a similar navigation experience across both. Navix grew alongside the app through that process — features were added as needs arose, issues were cleaned up. There are still areas to develop, but it's now reached the maturity to carry a real application.