kebab-case to camelCase converter
Paste hyphenated names such as CSS properties or HTML attributes and get the camelCase form JavaScript expects.
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 kebab-case 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 kebab-case name is split into words at the hyphens, and at any capital that follows a lowercase letter. The first word is then lowercased and each following word starts with a capital, with no separator. Symbols and spaces around the names are left as they are. Example: background-color becomes backgroundColor.
Example
Result: camelCase result: backgroundColor fontSize borderTopLeftRadius; Names processed: 3.
background-color font-size border-top-left-radius
backgroundColor fontSize borderTopLeftRadius
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.
- Arabic and other scripts without capital letters lose their word breaks in this style, so the words run together.
Questions about this tool
Why can I not write font-size as is in JavaScript?
In JavaScript a hyphen means minus, so the name is written fontSize on element.style or in React style objects.
Does it work for data attributes?
Yes, data-user-id becomes dataUserId; drop the leading data to get the dataset.userId key.
What about CSS variables such as --main-color?
The two leading hyphens stay and the rest becomes mainColor, but CSS variables are read in JavaScript by their full name with getPropertyValue, so they do not need converting.