camelCase to kebab-case
Convert camelCase to kebab-case in your browser: maxLength becomes max-length. With 6 examples, acronyms and digits included — one of them does not convert back unchanged, and the page shows why. Free, nothing uploaded.
Part of writing tools and developer tools.
camelCase
maxLength
PascalCase
MaxLength
snake_case
max_length
SCREAMING_SNAKE_CASE
MAX_LENGTH
kebab-case
max-length
Title Case
Max Length
Sentence case
Max length
lower case
max length
UPPER CASE
MAX LENGTH
camelCase to kebab-case examples
| camelCase | kebab-case | Copy |
|---|---|---|
| maxLength | max-length | |
| userCard | user-card | |
| dryRun | dry-run | |
| primaryButtonColor | primary-button-color | |
| innerHTML | inner-html | |
| h1Title | h1-title |
One row does not survive the round trip back to camelCase: inner-html comes back as innerHtml, not innerHTML. The converter keeps only the words, lowercased, so the capitals of an acronym and the place of a separator before a digit are gone once the text is converted.
Where you convert camelCase to kebab-case
Going back out to markup. HTML attribute names are case-insensitive, so a prop declared as maxLength in a Vue component is written max-length in an in-DOM template, and custom elements must contain a hyphen. CSS custom properties, BEM class names, URL slugs and command-line flags (dryRun becomes --dry-run in most argument parsers) all follow the same convention.
How the conversion works
The converter first reads primaryButtonColor as the words primary / button / color — splitting on spaces, underscores and hyphens, before every capital that follows a lowercase letter or a digit, and before the last capital of a run that starts a new word (HTTPResponse is HTTP / Response). Then it joins the lowercase words with hyphens: primary-button-color. Since it starts from the words and not from the camelCase spelling, text already in any other case gives the same result.
Other conversions
Going the other way? kebab-case to camelCase.
- camelCase to snake_case
- snake_case to camelCase
- camelCase to SCREAMING_SNAKE_CASE
- Sentence case to camelCase
Or open the full case converter and see your text in all nine cases at once.