TanStack
Virtual

Marko Example: Ssr
GitHub StackBlitz CodeSandbox

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>SSR baseline — @tanstack/marko-virtual</title>
    <style>
      * { box-sizing: border-box; margin: 0; padding: 0; }
      body { font-family: system-ui, sans-serif; padding: 24px; }
      h1 { font-size: 24px; margin-bottom: 8px; }
      p { color: #555; margin-bottom: 16px; max-width: 60ch; }
      code { background: #f3f4f6; padding: 1px 5px; border-radius: 4px; font-size: 12px; }
      .scroll-container { height: 400px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 6px; position: relative; }
      .item { display: flex; align-items: center; padding: 0 12px; font-size: 13px; border-bottom: 1px solid #f3f4f6; }
      .item-even { background: #f9fafb; }
      .item-odd  { background: #ffffff; }
    </style>
  </head>
  <body>
    <h1>SSR baseline (Mode A)</h1>
    <p>
      The server renders an <strong>empty</strong> container — no <code>&lt;if=mounted&gt;</code> guard,
      no seed. On the client the tag builds the virtualizer in <code>onMount</code>, measures the
      scroll element, and fills the window. View source (Ctrl/Cmd-U) to confirm the container has
      no rows in the server HTML, then watch it fill on load.
    </p>

    <div/scrollEl class="scroll-container">
      <virtualizer/v
        count=10000
        estimateSize=() => 35
        getScrollElement=() => scrollEl()
      />
      <div style=`height: ${v.totalSize}px; width: 100%; position: relative`>
        <for|item| of=v.virtualItems>
          <div
            class=item.index % 2 === 0 ? "item item-even" : "item item-odd"
            style=`position: absolute; top: 0; left: 0; width: 100%; height: ${item.size}px; transform: translateY(${item.start}px)`
          >
            Row ${item.index}
          </div>
        </for>
      </div>
    </div>
  </body>
</html>