BEM Class Name Generator

Generate Block__Element--Modifier CSS class names from block, element and modifier inputs with HTML/CSS preview.

Block

Element (optional)

Element sep

Modifier sep

Word sep

Modifiers — one per line, optional key:value

className

card__title card__title--large card__title--theme-dark card__title--active

card__titlecard__title--largecard__title--theme-darkcard__title--active

1 base + 3 modifier(s)

HTML

<div class="card__title card__title--large card__title--theme-dark card__title--active"></div>

CSS skeleton

.card {
  /* block */
}

.card__title {
  /* element */
}

.card__title--large {
  /* modifier */
}

.card__title--theme-dark {
  /* modifier */
}

.card__title--active {
  /* modifier */
}

.env to JSON

Parse a .env / dotenv file into a JSON object and convert JSON back into .env format, handling quotes, comments, and export prefixes.

Web & Dev

Accept-Language / Accept Parser

Parse and sort Accept-Language or Accept headers by quality value (q-factor).

Web & Dev

Asset Cache-Busting URL Builder

Appends a deterministic version/hash query param to a list of asset URLs.

Web & Dev

AsyncAPI Validator Preview

Validate common AsyncAPI structure and summarize channels, operations, messages, and servers.

Web & Dev

BEM Class Name Generator

Command Palette