How to Generate UUID in JavaScript - Complete Guide with crypto.randomUUID()

MODERN

Generate UUID with crypto.randomUUID()

The fastest and simplest way to generate UUIDs in modern browsers (Chrome 92+, Firefox 95+, Safari 15.4+):

JavaScript Native API

// Generate UUID v4 (Random) - No dependencies!
const uuid = crypto.randomUUID();
console.log(uuid);  
// Output: 550e8400-e29b-41d4-a716-446655440000

// Use in your app
const userId = crypto.randomUUID();
const sessionId = crypto.randomUUID();
const transactionId = crypto.randomUUID();

// Generate multiple UUIDs
const uuids = Array.from({ length: 5 }, () => crypto.randomUUID());
console.log(uuids);

Browser Support ✓

Chrome 92+, Edge 92+, Firefox 95+, Safari 15.4+, Opera 78+. No polyfill needed for modern apps!

LEGACY

Browser Compatibility Check for UUID Generation

Feature Detection

if (crypto.randomUUID) {
  // Modern browsers
  const id = crypto.randomUUID();
} else {
  // Fallback for old browsers
  console.warn('UUID not supported');
}

Supported Browsers

Chrome 92+ (Sept 2021)
Firefox 95+ (Dec 2021)
Safari 15.4+ (Mar 2022)
Edge 92+ (Sept 2021)

Generate UUIDs with npm uuid Package

For older browsers or when you need UUID v1/v5/v7, use the uuid package:

Installation

npm install uuid

JavaScript - uuid package

import { v1, v4, v5, v7, validate, version } from 'uuid';

// ✅ UUID v4 - Random (most common)
const uuidV4 = v4();
console.log(uuidV4);  // 550e8400-e29b-41d4-a716-446655440000

// 🕐 UUID v1 - Timestamp + MAC address
const uuidV1 = v1();
console.log(uuidV1);  // 6ba7b810-9dad-11d1-80b4-00c04fd430c8

// 📅 UUID v7 - Unix timestamp (sortable, recommended for databases)
const uuidV7 = v7();
console.log(uuidV7);  // 018e9c57-89a0-7000-8000-0000000000000

// 🔐 UUID v5 - SHA-1 hash (deterministic)
const MY_NAMESPACE = '1b671a64-40d5-491e-99b0-da01ff1f3341';
const uuidV5 = v5('hello', MY_NAMESPACE);
console.log(uuidV5);  // Same input = same UUID

// ✔️ Validate UUID format
console.log(validate(uuidV4));  // true
console.log(validate('invalid-uuid'));  // false

// 📍 Get UUID version
console.log(version(uuidV4));  // 4

Validate UUID Format in JavaScript

REGEX Regular Expression Validator

function isValidUUID(str) {
  const regex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
  return regex.test(str);
}

// Test
console.log(isValidUUID('550e8400-e29b-41d4-a716-446655440000')); // true
console.log(isValidUUID('invalid')); // false

NPM Using uuid Package

import { validate, version } from 'uuid';

const uuid = '550e8400-e29b-41d4-a716-446655440000';

if (validate(uuid)) {
  console.log('Valid UUID');
  console.log(`Version: ${version(uuid)}`);
} else {
  console.log('Invalid UUID');
}

Generate Nil UUID (Empty UUID)

JavaScript

import { NIL as NIL_UUID } from 'uuid';

// Nil UUID (all zeros)
console.log(NIL_UUID);  
// 00000000-0000-0000-0000-000000000000

// Check if UUID is nil
function isNilUUID(uuid) {
  return uuid === '00000000-0000-0000-0000-000000000000';
}

// Use as placeholder/default value
const defaultUserId = NIL_UUID;

UUID Storage & Conversion Techniques

💾 LocalStorage UUID Persistence

// Generate and store user session UUID
const sessionId = crypto.randomUUID();
localStorage.setItem('sessionId', sessionId);

// Retrieve
const storedSession = localStorage.getItem('sessionId');

🔗 Convert UUID to Different Formats

const uuid = '550e8400-e29b-41d4-a716-446655440000';

// Remove hyphens
const compact = uuid.replace(/-/g, '');
// 550e8400e29b41d4a716446655440000

// To uppercase
const upper = uuid.toUpperCase();

// To bytes (for binary storage)
const bytes = new Uint8Array(
  uuid.replace(/-/g, '')
      .match(/.{2}/g)
      .map(byte => parseInt(byte, 16))
);

React UUID Integration Examples

React Component with UUID Keys

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);

  const addTodo = (text) => {
    const newTodo = {
      id: crypto.randomUUID(),
      text: text,
      completed: false
    };
    setTodos([...todos, newTodo]);
  };

  return (
    
      {todos.map(todo => (
        
          {todo.text}
        
      ))}
    
  );
}

Generate UUID for API Request Tracking

JavaScript - API Tracking

// Add unique request ID to every API call
async function apiRequest(endpoint, options = {}) {
  const requestId = crypto.randomUUID();
  
  const response = await fetch(endpoint, {
    ...options,
    headers: {
      ...options.headers,
      'X-Request-ID': requestId,
      'X-Correlation-ID': requestId
    }
  });
  
  console.log(`Request ${requestId} completed`);
  return response;
}

// Usage
apiRequest('/api/users', { method: 'POST', body: data });

Related Programming Language UUID Guides

Python UUID Generation Java UUID Generation C# GUID Generation PHP UUID Generation Go UUID Generation Node.js UUID Generation TypeScript UUID Rust UUID Generation Ruby UUID Generation Swift UUID Generation Kotlin UUID Generation Dart/Flutter UUID Bash UUID Scripts PowerShell UUID C++ UUID Generation Scala UUID Generation R UUID Generation