How to Use UUID v5 in JavaScript (HTML + Web Crypto API)

DJC > Tutorial

In this tutorial, you will learn how to generate UUID version 5 (UUID v5) using only HTML and JavaScript, with no external libraries. We will use the native crypto.subtle.digest API, available in all modern browsers.

UUID v5 is ideal when you need unique but deterministic identifiers, meaning it always produces the same result for the same text + namespace.

1. What is a UUID v5?

A UUID v5 is generated by applying:

  • A namespace UUID (can be a standard one or a custom one)
  • A name (string)
  • A SHA-1 hash

It is deterministic: if you always pass the same namespace + text, you will get the same UUID.

2. Standard namespaces

RFC 4122 defines these namespaces:

Type UUID
DNS 6ba7b810-9dad-11d1-80b4-00c04fd430c8
URL 6ba7b811-9dad-11d1-80b4-00c04fd430c8
OID 6ba7b812-9dad-11d1-80b4-00c04fd430c8
X500 6ba7b814-9dad-11d1-80b4-00c04fd430c8

You can also use a custom namespace, generated with UUID v4.

3. JavaScript function to generate UUID v5

Here is the full function that generates UUID v5 from scratch:

async function uuidv5(name, namespace) {
    const textEncoder = new TextEncoder();
    const nameBytes = textEncoder.encode(name);

    const ns = namespace.replace(/-/g, "");
    const nsBytes = new Uint8Array(ns.match(/.{1,2}/g).map(byte => parseInt(byte, 16)));

    const combined = new Uint8Array(nsBytes.length + nameBytes.length);
    combined.set(nsBytes);
    combined.set(nameBytes, nsBytes.length);

    const hashBuffer = await crypto.subtle.digest("SHA-1", combined);
    const hash = new Uint8Array(hashBuffer);

    hash[6] = (hash[6] & 0x0f) | 0x50;
    hash[8] = (hash[8] & 0x3f) | 0x80;

    const hex = [...hash].map(b => b.toString(16).padStart(2, "0")).join("");

    return [
        hex.substring(0, 8),
        hex.substring(8, 12),
        hex.substring(12, 16),
        hex.substring(16, 20),
        hex.substring(20, 32)
    ].join("-");
}
````

---

## 4. Full HTML example

Copy and paste this `.html` file and test it in any browser:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>UUID v5 Example</title>
</head>
<body>
  <h2>Generate UUID v5</h2>

  <input id="name" placeholder="Text to generate UUID" />
  <button onclick="generateUUIDv5()">Generate</button>

  <p><strong>UUID v5:</strong> <span id="result"></span></p>

<script>
async function uuidv5(name, namespace) {
    const textEncoder = new TextEncoder();
    const nameBytes = textEncoder.encode(name);

    const ns = namespace.replace(/-/g, "");
    const nsBytes = new Uint8Array(ns.match(/.{1,2}/g).map(byte => parseInt(byte, 16)));

    const combined = new Uint8Array(nsBytes.length + nameBytes.length);
    combined.set(nsBytes);
    combined.set(nameBytes, nsBytes.length);

    const hashBuffer = await crypto.subtle.digest("SHA-1", combined);
    const hash = new Uint8Array(hashBuffer);

    hash[6] = (hash[6] & 0x0f) | 0x50;
    hash[8] = (hash[8] & 0x3f) | 0x80;

    const hex = [...hash].map(b => b.toString(16).padStart(2, "0")).join("");

    return [
        hex.substring(0, 8),
        hex.substring(8, 12),
        hex.substring(12, 16),
        hex.substring(16, 20),
        hex.substring(20, 32)
    ].join("-");
}

async function generateUUIDv5() {
  const name = document.getElementById("name").value;
  const DNS_NAMESPACE = "6ba7b810-9dad-11d1-80b4-00c04fd430c8";

  const uuid = await uuidv5(name, DNS_NAMESPACE);
  document.getElementById("result").innerText = uuid;
}
</script>
</body>
</html>

5. How to test it?

  1. Enter some text in the input field (e.g., example.com).
  2. Click Generate.
  3. You will get a UUID v5 that is always the same.

Example:

9073926b-929f-31c2-abc9-fad77ae3e8eb

6. Use your own custom Namespace

If you want your own namespace:

  1. Generate a UUID v4 in Python or JS.
  2. Save it (file, variable, config).
  3. Use it like this:
const MY_NAMESPACE = "3f52c084-2c22-4c62-bec7-53d704d6e02b";
const id = await uuidv5("user123", MY_NAMESPACE);

You will always get the same result for that name.

With this function you can generate UUID v5:

  • Without libraries
  • In any modern browser
  • Deterministically
  • Compatible with Python, Node.js, Go, Java, and more

If you want, I can add:

  • ES6 module example
  • Optimized version
  • How to validate a UUID v5
  • How to create a WebComponent to generate UUID v5

DJC > Tutorial