structuredClone vs spread vs JSON — deep clone playground

<div class="pg">
    <h1 class="pg-title">🧬 Deep clone showdown</h1>
    <p class="pg-sub">
      Build a nested object with a <code>Date</code>, a <code>Set</code>, a <code>Map</code>,
      and (optionally) a circular reference. Then watch <code>{...obj}</code>,
      <code>JSON.parse(JSON.stringify(obj))</code>, and <code>structuredClone(obj)</code>
      handle the exact same object three different ways.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Build the object</div>
      <div class="presets">
        <button class="btn sm" data-preset="basic" aria-pressed="true">🌱 Basic (Date + Set + Map)</button>
        <button class="btn sm" data-preset="circular" aria-pressed="false">🔁 Circular reference</button>
        <button class="btn sm" data-preset="mapdate" aria-pressed="false">🗓️ Map &amp; Date heavy</button>
      </div>
      <p class="hint" id="objectHint"></p>
      <div class="code" id="objectCode"></div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Clone it three ways</div>
      <div class="code" style="margin-bottom:14px">const shallow&nbsp;&nbsp;&nbsp;&nbsp;= { ...obj };
const roundTripped = JSON.parse(JSON.stringify(obj));
const trueClone&nbsp;&nbsp;&nbsp; = structuredClone(obj);</div>

<div class="btn-row">
        <button class="btn primary" id="mutateBtn">Mutate the nested value</button>
        <button class="btn ghost" id="resetBtn">Reset</button>
      </div>

<div class="status" id="status" style="margin-top:14px" aria-live="polite">
        <span class="dot info" id="dot"></span><span id="statusText">Loading…</span>
      </div>
      <p class="hint">
        Each clone is made <strong>once</strong>, right when you pick a preset. "Mutate the
        nested value" only changes the <em>original</em> object afterwards — the checklist
        below reveals which copies quietly followed along.
      </p>
    </div>
  </div>

preview

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