Index

<Index each={list}>{(item, index) => row}</Index> renders one row per position. Rows are created or removed only when the length changes; the row at position i stays and its item accessor follows the value at i. index is a plain number. Use it for lists of primitives and for inputs where the position, not the identity, is what a row represents.

import { useStore } from "@shadow-js/core";
import { Index } from "@shadow-js/web";

export function Cells() {
  const [values] = useStore(["a", "b"]);

  return <Index each={values}>{(value, index) => <span>{index}:{value()}</span>}</Index>;
}