Chapter 4: Other Framework Adapters

Core Idea

TanStack Virtual keeps the same headless Virtualizer model across frameworks, while each adapter exposes a native creation or injection API. The primary differences are setup syntax and reactive lifecycle.

Key Concepts

• Angular: @tanstack/angular-virtual provides injectVirtualizer and injectWindowVirtualizer.
• Solid: @tanstack/solid-virtual provides createVirtualizer and createWindowVirtualizer.
• Svelte: @tanstack/svelte-virtual provides createVirtualizer and createWindowVirtualizer.
• Vue: @tanstack/vue-virtual provides useVirtualizer and useWindowVirtualizer.
• Marko: @tanstack/marko-virtual provides <virtualizer> and <window-virtualizer> tags with inputs for count, estimate size, scroll behavior, and dynamic sizing.
• Shared contract: Every adapter ultimately supplies item indexes and geometry to application-owned markup.
• Window variants: Each documented adapter includes an API for window scrolling.
• Core: @tanstack/virtual-core is the shared framework-neutral foundation.

Code Examples

// Angular
const virtualizer = injectVirtualizer(() => ({
  count: items.length,
  estimateSize: () => 35,
  getScrollElement: () => scrollElement(),
}))

// Solid
const virtualizer = createVirtualizer(() => ({
  count: items().length,
  estimateSize: () => 35,
  getScrollElement: () => scrollElement(),
}))

• What it demonstrates: The source APIs differ in reactive construction, but options retain the same meaning.

Key Takeaways

1. Select the package for the framework that owns the DOM.
2. Learn the adapter's lifecycle syntax, then apply the shared geometry model.
3. Marko is tag-oriented and has its own input/reference surface; use the concise shared concepts first.
4. Use the window-specific factory or hook when the page itself scrolls.

Connects To

• Ch 002: Package installation names.
• Ch 007: Shared options and methods.
• Ch 020: Window virtualization geometry.