Array.fromAsync — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Array.fromAsync in action</h1>
    <p class="pg-sub">
      An async generator drips out items one at a time. Try three ways to collect them all into a
      plain array — only one requires zero boilerplate.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Configure the source</div>
      <div class="wrap-controls">
        <div class="field">
          <label class="label" for="count">Items to generate <span class="mono" id="countOut">8</span></label>
          <input type="range" id="count" min="4" max="16" step="1" value="8" />
        </div>
        <div class="field">
          <label class="label" for="delay">Delay per item <span class="mono" id="delayOut">120 ms</span></label>
          <input type="range" id="delay" min="40" max="400" step="20" value="120" />
        </div>
      </div>
      <p class="hint">
        Each call to <code>next()</code> on the async generator takes this long, simulating a real
        async source (network page, database cursor, stream).
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Pick an approach</div>
      <div class="approach-btns">
        <button class="approach-btn" id="btnSpread">
          <span class="tag bad">throws</span>
          <span><strong>[...asyncGen()]</strong> — spread an async iterable</span>
        </button>
        <button class="approach-btn" id="btnLoop">
          <span class="tag warn">works</span>
          <span><strong>for await ... push</strong> — manual loop into an array</span>
        </button>
        <button class="approach-btn" id="btnFromAsync">
          <span class="tag good">best</span>
          <span><strong>await Array.fromAsync(asyncGen())</strong> — one call</span>
        </button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Watch it collect</div>
      <div class="cards" id="cards" aria-label="collected items"></div>
      <div id="status" class="status" style="margin-top:8px">
        <span class="dot info" id="dot"></span>
        <span id="statusText">Pick an approach above.</span>
      </div>
      <div style="margin-top:10px">
        <div class="result-row">
          <span class="result-label">result →</span>
          <span class="result-val" id="resultVal">—</span>
        </div>
        <div class="result-row" style="margin-top:4px">
          <span class="result-label">time →</span>
          <span class="result-val" id="timeVal">—</span>
        </div>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">4</span> The code running</div>
      <div class="code" id="codeDisplay" aria-live="polite"></div>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.