I Built a UUID Generator Using crypto.randomUUID() (Why Math.random() Is the Wrong Choice)

#opensource #webdev #javascript #devtools

UUID generators are everywhere. Most of them work. But a surprising number use Math.random() under the hood, which is not cryptographically random — it's a pseudorandom number generator seeded from system time.

I built a UUID Generator using crypto.randomUUID() and crypto.getRandomValues(), with bulk generation, copy support, and format options. All in the browser.

👉 https://uuid-generator-bsf.pages.dev/

Why `crypto.randomUUID()` and Not `Math.random()`?

For UUIDs used as database primary keys or session identifiers, the uniqueness guarantee matters. Math.random() is deterministic given the same seed and is not suitable for security-sensitive random number generation.

crypto.randomUUID() uses a CSPRNG (cryptographically secure pseudorandom number generator) internally and produces a properly formatted v4 UUID per RFC 4122:

const uuid = crypto.randomUUID();
// "f47ac10b-58cc-4372-a567-0e02b2c3d479"

Position 13 is always 4 (version), and position 17 is always 8, 9, a, or b (variant). The spec guarantees this. Math.random() implementations don't.

Fallback for Older Environments

For environments without crypto.randomUUID(), there's a manual implementation using crypto.getRandomValues():

function uuidv4Fallback() {
  const b = crypto.getRandomValues(new Uint8Array(16));
  b[6] = (b[6] & 0x0f) | 0x40; // version 4
  b[8] = (b[8] & 0x3f) | 0x80; // variant
  const h = [...b].map(x => x.toString(16).padStart(2, "0"));
  return `${h.slice(0,4).join("")}-${h.slice(4,6).join("")}-${h.slice(6,8).join("")}-${h.slice(8,10).join("")}-${h.slice(10).join("")}`;
}

Setting version and variant bits manually ensures the output is a valid v4 UUID even without the high-level API.

What the Tool Includes

Single UUID generation — one click, instantly copied
Bulk generation — specify a count, get a list; useful for seeding test databases
Per-UUID copy and copy all buttons
Uppercase/lowercase toggle — some systems require uppercase UUIDs
Hyphen toggle — some APIs want f47ac10b58cc4372a5670e02b2c3d479 without separators
Fully offline — generation never touches a network

Validated Against Format Requirements

Test coverage includes:

Version bit: position 13 is always 4
Variant bit: position 17 is always 8, 9, a, or b
Total length: always 36 characters (32 hex + 4 hyphens)
Bulk generation: 10,000 UUIDs produced with zero duplicates
Uppercase/lowercase and hyphen modes produce correct output formats

58/58 passing tests.

No Framework, No External Libraries

A UUID generator has one meaningful state: the list of generated UUIDs. There's no component hierarchy, no data flow, no need for a virtual DOM. A single HTML file with ~100 lines of vanilla JS handles it.

This is devnestio's standard: single HTML file, zero CDN dependencies. After the first page load, it works entirely from browser cache — offline, on a plane, in a restricted environment.

What's Next

UUID v7 support — time-sortable UUIDs, increasingly popular as database primary keys
ULID generation — another time-ordered unique ID format
UUID validation and parsing — check whether a string is a valid UUID and what version

UUID v7 is particularly interesting: it encodes the timestamp in the first 48 bits, making them naturally sortable by creation time without a separate created_at column. Worth adding if there's demand.