Clipboard timing lab — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Clipboard timing lab</h1>
    <p class="pg-sub">
      Two "Copy invite link" buttons. Both <code>await</code> a fake network call before copying.
      One uses <code>navigator.clipboard.writeText()</code> — the naive way. The other uses
      <code>navigator.clipboard.write()</code> with a <em>promise</em> as the data — the fix. Set a delay,
      click a button, then <span class="race">switch tabs and back before the timer finishes</span> to see
      which one still works.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Set the delay</div>
      <div class="field">
        <label class="ctl-label" for="delay">Fake network delay: <span id="delayOut">1200</span> ms</label>
        <input type="range" id="delay" min="0" max="3500" step="100" value="1200" />
      </div>
      <div class="presets" style="margin-top:10px">
        <button class="btn sm" data-preset="0">Instant (0ms)</button>
        <button class="btn sm" data-preset="1200">Typical fetch (1200ms)</button>
        <button class="btn sm" data-preset="3000">Slow network (3000ms)</button>
      </div>
      <p class="hint">Higher delay = more time for you to alt-tab away before the write actually fires.</p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Try the naive copy</div>
      <div class="btn-row">
        <button class="btn bad" id="naive">Copy (naive: writeText after await)</button>
      </div>
      <ol class="steps">
        <li>Click the button.</li>
        <li>Immediately switch to another tab or window, then switch back <em>before the status below changes</em>.</li>
        <li>Watch the status: on most browsers this throws <code>NotAllowedError</code> because the document lost focus while the fetch was pending.</li>
      </ol>
      <div class="status" id="naiveStatus" style="margin-top:12px">
        <span class="dot info" id="naiveDot"></span><span id="naiveText">Ready.</span>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Try the fixed copy</div>
      <div class="btn-row">
        <button class="btn good" id="robust">Copy (fixed: write() with a Promise)</button>
      </div>
      <p class="hint">
        Do the exact same thing — tab away and back mid-delay. <code>write()</code> is called
        <strong>synchronously</strong> inside this click, while focus is still guaranteed, and the text
        itself arrives later via a promise. The clipboard slot stays reserved either way.
      </p>
      <div class="status" id="robustStatus" style="margin-top:12px">
        <span class="dot info" id="robustDot"></span><span id="robustText">Ready.</span>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">4</span> Check what actually landed</div>
      <div class="btn-row">
        <button class="btn ghost" id="paste">Read clipboard now</button>
        <button class="btn ghost sm" id="reset">Reset</button>
      </div>
      <div class="linkbox" id="pasteResult">— nothing read yet —</div>
      <p class="hint" id="pasteHint">
        Some browsers restrict programmatic reads more than writes — if this button errors, paste manually
        (Ctrl/Cmd+V) into any text field instead; that always reflects the real clipboard.
      </p>
    </div>
  </div>

preview

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