Promise.withResolvers() — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Promise.withResolvers()</h1>
    <p class="pg-sub">
      Create a pending promise, then settle it from a button click or a timeout —
      completely <strong>outside</strong> the code that created it. That's the whole point of
      <code>Promise.withResolvers()</code>: <code>resolve</code> and <code>reject</code> live in your
      scope, ready for later.
    </p>

<div class="banner" id="banner">
      Your browser doesn't implement <code>Promise.withResolvers</code> natively — this demo falls
      back to a tiny inline polyfill so it still runs identically. Native support is
      <strong>Baseline 2024</strong> (Chrome 119+, Firefox 121+, Safari 17.4+, Node.js 22+).
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Settle it from outside</div>
      <p class="hint" style="margin:0 0 12px">
        The promise below is created once, up front. Confirm, Cancel, and the timeout all fire
        <strong>later</strong>, from outside — exactly like a real "are you sure?" dialog or a
        socket event.
      </p>
      <div class="btn-row">
        <button class="btn good" id="resolveBtn">✅ Confirm (resolve)</button>
        <button class="btn bad" id="rejectBtn">❌ Cancel (reject)</button>
        <button class="btn ghost" id="timeoutBtn">⏱ Simulate 3s timeout</button>
      </div>
      <div class="btn-row" style="margin-top:10px">
        <button class="btn sm" id="newBtn">🔄 New pending promise (reset)</button>
        <span class="muted mono" id="countdown"></span>
      </div>
      <div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="confirm">Preset: user confirms</button>
        <button class="btn sm" data-preset="cancel">Preset: user cancels</button>
        <button class="btn sm" data-preset="timeout">Preset: nobody answers</button>
        <button class="btn sm" data-preset="double">Preset: confirm, then cancel (no-op)</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Promise state</div>
      <div class="status" id="status" aria-live="polite">
        <span class="dot info" id="dot"></span
        ><span id="statusText">pending — waiting for an external event…</span>
      </div>
      <div class="output" style="margin-top:10px">
        <div class="ctl-label" style="margin-bottom:6px">Settled value</div>
        <div class="mono" id="value">—</div>
      </div>
      <div class="log" id="log" style="margin-top:10px"></div>
      <p class="hint">
        <code>resolve</code> and <code>reject</code> are ordinary functions sitting in this scope —
        call either one from anywhere, anytime. Once the promise settles, every later call is
        silently ignored: <strong>the first settlement always wins</strong>. Try the last preset,
        or click Confirm and then Cancel yourself, to see it happen.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Old way vs new way</div>
      <div class="compare">
        <div class="compare-col">
          <div class="compare-head"><span class="pill bad">escape the executor</span></div>
          <pre class="code"><span class="tok-kw">let</span> resolve, reject;
<span class="tok-kw">const</span> promise = <span class="tok-kw">new</span> <span class="tok-sel">Promise</span>((res, rej) => {
  resolve = res;
  reject = rej;
});</pre>
        </div>
        <div class="compare-col">
          <div class="compare-head"><span class="pill good">Promise.withResolvers()</span></div>
          <pre class="code"><span class="tok-kw">const</span> { promise, resolve, reject } =
  <span class="hl"><span class="tok-sel">Promise</span>.withResolvers()</span>;</pre>
        </div>
      </div>
      <p class="hint">
        Both give you the same three things — a promise plus its resolve/reject functions, free to
        hand to code outside the constructor. The right side just skips the manual "declare outer
        variables, then capture them" dance. This demo's buttons call the right-hand form (or the
        polyfill below, if your browser lacks it).
      </p>
    </div>
  </div>

preview

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