Kebab Case Converter

How to use the kebab case converter

1. Type or paste your text into Your text, or click Example to load four sample names in different styles. Open file reads a plain-text file such as a .txt or .csv.
2. Choose a Separator: kebab-case (hyphens) is the default; dot.case joins the same words with periods.
3. The Result box updates as you type. Each input line gives one output line, so a list of 200 names comes back as 200 converted names in the same order.
4. Click Copy or Download .txt, or Use as input to keep working on the result. The links under the result send it on to camelCase, snake_case or the URL slug tool.

How the tool finds the words

The converter works one line at a time. On each line it first marks where a new word starts inside a name, then splits at everything that is not a letter or a digit, lowercases each word and joins them with the separator. The rules:

The acronym rule is what makes names such as getHTTPResponseCode come out as get-http-response-code rather than get-h-t-t-p-response-code or gethttp-response-code. A whole word in capitals with no lowercase letters, such as ABC, stays one word: abc.

Edge cases worth knowing

Because the tool treats a capital after a lowercase letter or digit as a new word, a few names split in places you might not expect. These outputs come straight from the tool:

If one of these matters, fix the source text first (write iphone instead of iPhone) or correct the few lines by hand afterwards. For titles that should become web addresses, use the URL slug generator, which also removes accents.

Other behavior:

• Accents and other alphabets are kept and lowercased: Café Crème Brûlée becomes café-crème-brûlée, Ünïcödé Straße becomes ünïcödé-straße, and 東京 タワー becomes 東京-タワー. To get plain ASCII letters, run the text through remove accents first.
• Empty lines stay empty, and a line with only spaces becomes empty. Windows line endings (CRLF) are written back as plain line feeds.
• A paragraph is one line, so a long sentence becomes one long hyphenated string. Put each name on its own line.

kebab-case or dot.case

The Separator option changes only the character placed between the words; the splitting and lowercasing are the same.

Dot case is common for configuration keys and translation keys, such as user.first.name in a settings or language file. Converting user.first.name with the hyphen separator gives user-first-name, so the tool also works for going from dot case back to kebab case.

Where kebab case is used

According to MDN, kebab case is the convention for CSS property names such as background-color and font-family, and for HTML attributes such as aria-label and data-*. Typical jobs for this converter:

• CSS class names and custom properties. Turning a list of design token names like mainBgColor into main-bg-color, then adding the -- prefix custom properties need (--main-bg-color). MDN notes that custom property names are case sensitive, so --my-color and --My-color are different properties; lowercasing everything avoids that mistake.
• data attributes. In JavaScript, element.dataset.userId reads the attribute data-user-id: the browser converts the part after data- from kebab case to camelCase. Converting userId here gives user-id; add data- in front for the attribute name. MDN advises against a digit right after a hyphen (data-test-1), because dataset will not recognize it.
• File and folder names for components, pages and images, when a project’s convention is lowercase names with hyphens.
• URL paths. Google’s Search Central documentation recommends hyphens rather than underscores to separate words in URLs. For page addresses, though, the URL slug generator is the better choice: it removes accents and apostrophes and can shorten long slugs.

Kebab case, snake case, camel case and Pascal case

All four write a multi-word name without spaces; they differ in the separator and the capitals. The cheat sheet beside the tool shows one name in each.

• kebab-case: lowercase, hyphens. CSS, HTML attributes, URLs.
• snake_case: lowercase, underscores. Function and variable names in Python (PEP 8), and often database column names. Use the snake case converter.
• camelCase: no separator, each word after the first capitalized. The form JavaScript’s dataset uses, turning data-user-id into userId. Use the camel case converter.
• PascalCase: like camelCase, but the first word is capitalized too. Class names in Python (PEP 8 calls it CapWords), and often types and UI components. Use the Pascal case converter.

Kebab case cannot be used for variable names in most languages, because a hyphen is read as a minus sign. The guide to camelCase vs snake_case vs kebab-case compares the three conventions in more detail.

Questions