Tool guide

camelCase to kebab-case Converter Online

The tool splits an identifier at its capital letters and rejoins the parts with hyphens, so backgroundColor becomes background-color. Kebab-case is the native form for CSS properties and classes, for data-* attributes and for readable URL paths, which is exactly where JavaScript names end up. Everything is transformed by the page's own script, so your list stays on your machine. See also: rename the same identifiers to snake_case, snake_case into hyphenated names, build a URL slug from a heading.

How to use it

Paste your identifiers into the camelCase field, one per line, following the myVariableName placeholder.
Press the convert button: every capital letter becomes a word boundary and the words are joined with hyphens.
Check the kebab-case output — acronyms such as URL or ID do not always split the way you intend.
Use the copy button to take the whole list into a stylesheet or a routing config.
To go back to JavaScript identifiers, use the kebab-case to camelCase converter instead.

FAQ

How do I turn a variable name into a CSS class name?

Run the identifier through the converter and use the output as is: CSS has always been hyphenated, and .user-card-title reads better than .userCardTitle. The one manual step is dropping helper prefixes such as is or tmp — useful in code, noise in markup.

What happens to acronyms like parseHTMLString?

The rule is purely mechanical: a boundary goes before every capital, so parseHTMLString becomes parse-h-t-m-l-string. Either normalise the acronym to Html in the source first, or fix the output by hand — nothing can automatically tell an acronym from a run of one-letter words.

Can I convert several hundred names at once?

Yes. The field takes multi-line text and each line is handled separately. The only limit is tab responsiveness — a few thousand lines will freeze the page for a moment. If the names come from a CSV, paste just the relevant column rather than the whole file.

Is kebab-case the right choice for URLs?

Yes, and search engines say so explicitly: hyphens are read as word separators in a path, underscores are read as part of the word. So /order-history is two words to a crawler while /order_history is one, which matches fewer queries.

How are digits and non-Latin letters treated?

Digits stay put and are not treated as word boundaries, so user2Name gives user2-name. Non-Latin characters pass through unchanged, but identifiers outside ASCII are a poor fit for CSS and URLs anyway, since they end up percent-encoded.

When would I pick kebab-case over snake_case?

Different separator, different territory. Hyphens belong to CSS, HTML attributes, URL paths and npm package names. Underscores belong to Python, SQL and filenames where a hyphen might read as a minus sign. Most projects use both, each in its own layer.

Examples

Class names from a styles object

Before: primaryButton modalOverlay userAvatarSmall

After: primary-button modal-overlay user-avatar-small

URL slug from a component name

Before: orderHistoryPage

After: order-history-page — ready to use as /account/order-history-page

camelCase to kebab-case Converter Online

How to use it

FAQ

Examples

Rate this tool