PROJECT / 12 FEATURE ARTICLE

PasswordGenerator

TYPE UtilitySTATUS live

A configurable password generator with strength guidance.

01 Project overview

Configure a password in the browser

This browser utility generates a password from a chosen length and character groups. The embedded V5 demo uses the browser’s Web Crypto random source, supports similar-character and ambiguous-punctuation exclusions, and provides five-level heuristic strength guidance with a selectable value for copying.

Generated values are not saved by the embedded demo. The earlier standalone page used Math.random() and browser-local history; that historical implementation remains available as source context, not as the public interactive experience.

02 Generation flow

From constraints to a generated value

Length + character options
Filtered character sets
Web Crypto selection
Required-group coverage
Secure shuffle
Generated password
Generated password
Heuristic strength
Copy

The embedded demo selects one value from each enabled group, fills the remaining positions from the allowed pool, then securely shuffles the result.

03 Implementation

A client-side utility with a heuristic meter

The embedded V5 demo uses HTML, CSS, and vanilla JavaScript without a backend or network requests. Length ranges from 4 to 100 characters, defaults to 16, and can include uppercase, lowercase, numbers, and symbols; all four groups start enabled. Optional filters remove similar or selected ambiguous characters.

Password randomness in the embedded demo comes from crypto.getRandomValues(). Rejection sampling selects characters without modulo bias, one character is selected from every enabled group, and an unbiased secure shuffle sets the final order. The five strength labels are heuristic guidance based on password length and the enabled character groups, not a security audit or guarantee.

The earlier standalone page used Math.random() and stored recent generated values in localStorage. The embedded V5 demo does not retain generated passwords or send them anywhere. Copy first tries the available browser API, then selects the readonly value for a browser-supported fallback or manual copy.

04 Controls and feedback

Tune the character pool, then review the result

Length

Choose 4–100 characters; the initial value is 16.

Character groups

Include uppercase, lowercase, numbers, and symbols. Each group is enabled by default.

Exclusions

Optionally remove similar characters or selected ambiguous punctuation.

Strength guidance

See Very Weak, Weak, Moderate, Strong, or Very Strong as a heuristic estimate.

Copy

Copy the selectable readonly value with a browser fallback when programmatic clipboard access is unavailable.

No retained history

Generated values are not stored by the embedded demo and disappear on reload.

05 Use the utility

Choose, generate, and copy

  1. 01

    Set constraints

    Choose a length and select the character groups to include.

  2. 02

    Refine the pool

    Turn on the optional exclusions for similar or ambiguous characters.

  3. 03

    Generate

    Create a value with the browser’s Web Crypto random source, including every enabled character group.

  4. 04

    Review guidance

    Read the five-level strength guide as a simple configuration and length heuristic.

  5. 05

    Copy

    Copy the current selectable value. The embedded demo does not retain generated-password history.

06 Interactive demo

Generate a password locally

Generate with Web Crypto, review heuristic strength guidance, and copy the result. This embedded demo does not retain password history.