crypto.randomUUID() — interactive playground

<div class="pg">
    <h1 class="pg-title">🔑 crypto.randomUUID() live</h1>
    <p class="pg-sub">
      Click <strong>Generate</strong> to call <code>crypto.randomUUID()</code> directly
      — no import, no library, just the native Web Crypto API.
      The UUID structure is highlighted below.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Generate a UUID</div>
      <div class="btn-row">
        <button class="btn primary" id="genBtn">Generate UUID</button>
        <button class="btn sm" id="copyBtn">Copy</button>
      </div>
      <div class="uuid-display" id="uuidDisplay">—</div>
      <div class="hint" id="structHint" style="display:none">
        Format: <code>xxxxxxxx-xxxx-<strong style="color:var(--good)">4</strong>xxx-<strong style="color:var(--warn)">y</strong>xxx-xxxxxxxxxxxx</code>
        — the <span style="color:var(--good);font-weight:700">4</span> is the version bit (v4 = random),
        <span style="color:var(--warn);font-weight:700">y</span> is the variant bits (8, 9, a, or b).
      </div>
      <div class="legend-row" id="legend" style="display:none">
        <div class="legend-item">
          <div class="legend-swatch" style="background:var(--accent)"></div>
          <span>random hex</span>
        </div>
        <div class="legend-item">
          <div class="legend-swatch" style="background:var(--good)"></div>
          <span>version (always 4)</span>
        </div>
        <div class="legend-item">
          <div class="legend-swatch" style="background:var(--warn)"></div>
          <span>variant (8/9/a/b)</span>
        </div>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Batch generate</div>
      <div class="row" style="margin-bottom:12px">
        <div class="field grow">
          <label class="label" for="countSel">How many?</label>
          <select id="countSel">
            <option value="5">5 UUIDs</option>
            <option value="10" selected>10 UUIDs</option>
            <option value="20">20 UUIDs</option>
            <option value="50">50 UUIDs</option>
          </select>
        </div>
        <div style="padding-top:22px">
          <button class="btn" id="batchBtn">Generate batch</button>
        </div>
      </div>
      <div class="uuid-list" id="uuidList">
        <div style="color:var(--faint);font-size:0.82rem;padding:4px 0">
          Click "Generate batch" to see a list of fresh UUIDs
        </div>
      </div>
      <p class="hint" style="margin-top:10px">
        Every UUID is unique — <code>crypto.randomUUID()</code> draws from the
        OS's CSPRNG, making collisions astronomically unlikely.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Before &amp; after</div>
      <div class="compare-grid">
        <div class="compare-card old">
          <div class="cc-label">❌ Before — with the uuid package</div>
          <div class="cc-code">import { v4 as uuidv4 }
  from 'uuid';

const id = uuidv4();</div>
          <div class="cc-badge bad">+ bundle weight</div>
        </div>
        <div class="compare-card native">
          <div class="cc-label">✅ After — native</div>
          <div class="cc-code">// no import needed

const id =
  crypto.randomUUID();</div>
          <div class="cc-badge good">zero dependencies</div>
        </div>
      </div>
      <p class="hint" style="margin-top:12px">
        Both produce the same v4 UUID format. Both use <code>crypto.getRandomValues()</code>
        under the hood. The native call removes the dependency entirely.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">4</span> Last generated UUID — copy-paste ready</div>
      <div class="code" id="codeSnippet">// Click "Generate UUID" above to see the result here
const id = crypto.randomUUID();
// → waiting for first generation...</div>
    </div>
  </div>

preview

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