camelCase to kebab-case converter
Turn JavaScript property and variable names from camelCase into lowercase, hyphenated kebab-case.
Loading the tool…
Processing and privacy: The result is calculated inside your browser and your data is not sent to any server.
How to use it
- Enter camelcase names (one per line or inside text).
- The result appears straight away and updates as you edit.
- Copy the result, or copy a link that keeps the same values to share it.
How it is calculated
Each camelCase name is split into words at every change from a lowercase letter or digit to a capital, and before the last capital of an acronym that is followed by a lowercase letter. The words are then lowercased and joined with hyphens (-). Symbols and spaces around the names are left as they are. Example: backgroundColor becomes background-color.
Example
Result: kebab-case result: background-color font-size border-top-left-radius; Names processed: 3.
backgroundColor fontSize borderTopLeftRadius
background-color font-size border-top-left-radius
Limits and caveats
- Every word in the pasted text is converted, including keywords and library names, so review the result before pasting it into code.
- A name with no capital to mark the word break, such as username or an Arabic name, cannot be split.
Questions about this tool
Why are CSS properties written in kebab-case?
CSS separates words with hyphens, while JavaScript does not allow hyphens in variable names, so background-color in CSS matches backgroundColor on a style object.
How does this relate to HTML data attributes?
element.dataset.userId in JavaScript maps to the data-user-id attribute in HTML, so convert userId here and add the data prefix.
What about vendor prefixes such as WebkitTransition?
It becomes webkit-transition; add the leading hyphen yourself to get the correct CSS property -webkit-transition.