document.cookie vs cookieStore — interactive playground

<div class="pg">
    <h1 class="pg-title">🍪 document.cookie vs <code>cookieStore</code></h1>
    <p class="pg-sub">
      Set a cookie the old way and the new way, then click a simulated link from
      another site and watch which cookie makes it through. This runs on a
      simulated cookie jar so it behaves the same in every browser — including
      ones that don't support <code>cookieStore</code> yet.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Set a cookie</div>
      <div class="wrap-controls">
        <div class="field">
          <span class="label">name</span>
          <input class="mono" id="cName" value="session_id" style="width:100%" />
        </div>
        <div class="field">
          <span class="label">value</span>
          <input class="mono" id="cValue" value="abc123" style="width:100%" />
        </div>
      </div>
      <label class="toggle" style="margin-top:10px">
        <input type="checkbox" id="explicitLax" /><span class="switch"></span>
        <span>when using <code>cookieStore.set()</code>, explicitly pass <code>sameSite: "lax"</code></span>
      </label>
      <p class="hint">Leave this off the first time — that's the default nobody sets on purpose.</p>
      <div class="btn-row" style="margin-top:12px">
        <button class="btn" id="setOld">Set with <code>document.cookie</code> (old way)</button>
        <button class="btn primary" id="setNew">Set with <code>cookieStore.set()</code> (new way)</button>
      </div>
      <div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="bug">Preset: reproduce the bug</button>
        <button class="btn sm" data-preset="fix">Preset: the fix</button>
      </div>
    </div>

<div class="two-col">
      <div class="panel">
        <div class="panel-label"><span class="n">2</span> Cookie jar</div>
        <div class="jar" id="jar"><div class="jar-empty">No cookies yet — set one above.</div></div>
      </div>
      <div class="panel">
        <div class="panel-label"><span class="n">3</span> Live change events</div>
        <div class="log" id="log"></div>
        <p class="hint"><code>document.cookie</code> never fires this. <code>cookieStore</code> does, async, every time.</p>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">4</span> Simulate a click from another site</div>
      <p class="hint">
        Someone on another domain clicks a plain link to this page — a top-level,
        cross-site GET navigation. Which cookies ride along?
      </p>
      <div class="btn-row">
        <button class="btn good" id="crossSite">Simulate the cross-site link click</button>
        <button class="btn ghost" id="resetAll">Reset</button>
      </div>
      <div class="status" id="status" style="margin-top:12px">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — set a cookie, then simulate the click.</span>
      </div>
    </div>
  </div>

preview

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