DEV Community

Rockey Lucky
Rockey Lucky

Posted on Fully Autonomous

How to Generate a UUID in JavaScript Without a Library (2026)

Generating unique identifiers is a common task in web development. Whether you're creating temporary IDs, identifying records, or preparing sample data, UUIDs can help.

The good news? Modern JavaScript can generate UUIDs without installing an external library.

In this tutorial, you'll learn how to use crypto.randomUUID(), understand when it works, and handle common errors.

1. What Is a UUID?

A UUID (Universally Unique Identifier) is a 128-bit identifier commonly represented as 32 hexadecimal characters separated by hyphens.

Here's an example of a UUID v4:

550e8400-e29b-41d4-a716-446655440000
Enter fullscreen mode Exit fullscreen mode

UUIDs are commonly used for:

  • Identifying application records
  • Generating test data
  • Tracking objects across systems
  • Creating identifiers for distributed applications
  • Assigning unique references to resources

UUIDs are designed to make accidental collisions extremely unlikely, but uniqueness is not mathematically guaranteed.

2. Generate a UUID in JavaScript Without a Library

Modern browsers provide a built-in method called crypto.randomUUID().

const uuid = crypto.randomUUID();

console.log(uuid);
Enter fullscreen mode Exit fullscreen mode

Example output:

8d7e4c30-f1a2-4b90-9c65-2e31d02a9f75
Enter fullscreen mode Exit fullscreen mode

Every successful call generates a new UUID v4 using a cryptographically secure random source.

You don't need to install an NPM package or write your own random ID algorithm.

Generate Multiple UUIDs

You can also generate multiple identifiers using a loop:

for (let i = 0; i < 5; i++) {
  console.log(crypto.randomUUID());
}
Enter fullscreen mode Exit fullscreen mode

This creates five UUID v4 values.

3. Generate a UUID on a Button Click

Here's a simple browser example:

<button id="generate">Generate UUID</button>
<p id="result"></p>

<script>
  document.getElementById("generate")
    .addEventListener("click", () => {
      const uuid = crypto.randomUUID();

      document.getElementById("result")
        .textContent = uuid;
    });
</script>
Enter fullscreen mode Exit fullscreen mode

When someone clicks the button, a new UUID appears on the page.

This can be useful when building developer tools, testing interfaces, or creating sample identifiers.

4. Does crypto.randomUUID() Work on HTTP?

One important limitation is that crypto.randomUUID() requires a secure context.

It works on HTTPS websites and generally on local development origins such as localhost.

However, calling it on an ordinary insecure HTTP website may result in an error because the method is unavailable.

If you see an error such as:

TypeError: crypto.randomUUID is not a function
Enter fullscreen mode Exit fullscreen mode

Check the following:

  1. Is your page running on HTTPS or a trusted local origin?
  2. Does your browser support the method?
  3. Are you using the correct JavaScript environment?

5. Generate a UUID in Node.js

Node.js also provides UUID v4 generation through its built-in crypto module in supported versions.

For an ES module:

import { randomUUID } from "node:crypto";

const id = randomUUID();

console.log(id);
Enter fullscreen mode Exit fullscreen mode

You don't need to install an additional UUID package for this method.

For CommonJS projects:

const { randomUUID } = require("node:crypto");

console.log(randomUUID());
Enter fullscreen mode Exit fullscreen mode

Both examples generate UUID v4 values.

6. JavaScript UUID vs NPM UUID Package

The native method is often enough when you only need a random UUID v4.

However, a dedicated UUID package can be useful when your project requires other versions, such as name-based UUID v5 or time-ordered UUID v7.

Here's a simple comparison:

Feature Native randomUUID() uuid NPM Package
External installation No Yes
UUID v4 generation Yes Yes
Other UUID versions Not through randomUUID() Supported
Simple setup Yes Additional dependency

Choose the simplest method that meets your application's requirements.

7. Test Your UUID Generation

After generating UUIDs, it's useful to check their format, version, and consistency during development.

You can use this JavaScript UUID generation guide for additional examples and a practical reference.

For your own applications, remember that UUIDs are identifiers, not passwords or authorization tokens. Don't rely on a UUID alone to protect sensitive data.

Frequently Asked Questions

Is crypto.randomUUID() free?

Yes. It is part of the built-in Web Crypto API and doesn't require a paid service.

Does JavaScript always generate unique UUIDs?

UUID v4 uses random data and has an extremely low collision probability when generated correctly. However, absolute uniqueness is not guaranteed.

Can I generate UUID v7 using crypto.randomUUID()?

No. crypto.randomUUID() generates UUID v4. UUID v7 requires a compatible implementation or library.

Should I use Math.random() to generate UUIDs?

Prefer crypto.randomUUID() for UUID v4 generation. Math.random() is not a cryptographically secure random source.

Final Thoughts

For most projects that only need random UUID v4 identifiers, JavaScript's built-in crypto.randomUUID() is a simple and reliable choice.

Start with the native API, check browser or runtime compatibility, and introduce a package only when your project requires additional UUID versions or features.

Which UUID method do you prefer in your JavaScript projects: the native API or an NPM package?

Top comments (0)