Guide · Open source
How to use nanoid: install and generate IDs in JavaScript
Updated · written with AI from the project's own documentation and checked against our catalogue data
nanoid is a small JavaScript library that generates random, URL-friendly string IDs for records, objects and database entries. It is useful for JavaScript and TypeScript developers who want unique IDs shorter than a standard 36-character UUID. After this guide you will be able to install it, generate IDs, change their size or alphabet, and know where the README advises against using it.
Quick start
- 1Install the package. Run npm install nanoid in your project folder. Node.js or a modern browser environment is required.
- 2Import nanoid. Import the nanoid function from the 'nanoid' package in your module.
- 3Generate an ID. Call nanoid() to get a 21-character URL-safe string.
- 4Set a size or alphabet if needed. Pass a length to nanoid(n), or use customAlphabet with your own symbols and size.
- 5Check collision risk. Use the collision probability calculator linked in the README to confirm your size and alphabet are safe for your data volume.
- 6Avoid React keys. Do not call nanoid() inside render for list keys; use stable IDs from your data instead.
What nanoid generates and why it is shorter than a UUID
By default, nanoid returns a 21-character ID made from the URL-safe symbols A-Za-z0-9_- . The README says the library is about 117 bytes minified and brotlied, has no dependencies, and uses a hardware-backed random source in Node.js and browsers.
The README describes it as comparable to UUID v4. It uses 126 random bits versus 122 in UUID v4, and a larger alphabet lets the same amount of randomness fit into 21 symbols instead of 36.
- Default output: 21 characters, for example "V1StGXR8_Z5jdHi6B-myT"
- Characters: A-Za-z0-9_- so IDs can sit safely in web addresses
- Dependencies: none, according to the README
Install nanoid with npm
The README gives one package-manager install command. You need Node.js or a modern browser environment. For quick experiments, the README also shows loading it from a CDN, but it says that is not recommended for production because of lower loading performance.
npm install nanoidGenerate your first ID
Import nanoid and call it with no arguments to get a 21-character ID. The README example assigns the result to a model's id field.
import { nanoid } from 'nanoid'
model.id = nanoid() //=> "V1StGXR8_Z5jdHi6B-myT"Change the ID length or build a custom alphabet
Pass a number to nanoid to set the size. The README warns that shorter IDs increase collision probability, so check your size with the collision probability calculator linked from the README.
customAlphabet returns a generator with your own alphabet and default size. The README says the alphabet must contain from 1 to 256 symbols; an empty or over-256-symbol alphabet can loop forever instead of returning an ID. You can also override the size on each call.
- Use nanoid(10) for a shorter 10-character ID
- Use customAlphabet from 'nanoid' for a secure custom alphabet
- Use customAlphabet from 'nanoid/non-secure' only when security is not a concern and you accept the slower speed the README mentions
import { customAlphabet } from 'nanoid'
const nanoid = customAlphabet('1234567890abcdef', 10)
model.id = nanoid() //=> "4f90d13a42"Avoid nanoid for React list keys
The README says there is no correct way to use Nano ID for the React key prop, because keys must stay consistent across renders. Calling nanoid() inside render creates a new key every time.
Use a stable id from your data where possible. The README says that for React 18 and later, useId is recommended when you only need random IDs to link labels and inputs.
- Best: a stable id from your data
- If none exists: the README says an index is still preferred over nanoid()
- For linking labels and inputs: useId in React 18 or later
Other entry points: custom random generators and TypeScript
customRandom lets you replace both the alphabet and the random bytes generator, for example with a seed-based generator. The README notes that between versions the random call sequence may change, so seed-based results are not guaranteed to match across releases.
The README includes a TypeScript section and a CLI section, but the truncated source does not show their details, so check the full README before relying on them.
import { customRandom, urlAlphabet } from 'nanoid'
const nanoid = customRandom(urlAlphabet, 10, random)What people use it for
- Assigning unique IDs to new records or objects before saving them to a database
- Creating short, URL-safe identifiers that can appear in web addresses
- Generating IDs with a custom alphabet, such as hexadecimal characters, for a specific system
- Producing dependency-free ID generation in front-end or Node.js code
- Linking form labels and inputs with random IDs, using useId in React 18 or later instead of nanoid
Frequently asked questions
Is nanoid free to use?
The source says nanoid is licensed under the MIT licence. The README does not discuss pricing, so the MIT licence is the licence information to rely on.
Does nanoid have any dependencies?
The README says nanoid has no dependencies and is about 117 bytes minified and brotlied. It uses the crypto module in Node.js and the Web Crypto API in browsers.
What is the difference between nanoid and UUID?
The README says nanoid uses a larger alphabet, so IDs are 21 characters instead of 36, while having a similar number of random bits to UUID v4. It is not a UUID implementation, so use it where a standard UUID format is not required.
Can I use nanoid for React keys?
The README advises against it. Calling nanoid() in render produces new keys on every render, so use stable IDs from your data, or useId for linking labels and inputs.
Is nanoid secure enough for IDs?
The README says the default version uses a hardware random generator and is tested for uniformity, and that it can be used in clusters. The non-secure export is faster to skip but is slower than the secure default, so use it only when needed.
What are alternatives to nanoid?
The source lists uuid, crypto.randomUUID, shortid and cuid as comparable projects. Choose a UUID library if you need a standardized UUID format.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
nanoid suits JavaScript or TypeScript developers who want short, URL-safe, dependency-free unique IDs and may need custom alphabets. Pick a standard UUID library such as uuid or crypto.randomUUID if you need an actual UUID format, and avoid nanoid for React list keys created on every render.
Install options & downloads