PascalCase to kebab-case converter
Paste PascalCase component or class names and get them in lowercase words joined by hyphens.
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 pascalcase 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 PascalCase 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: UserCard becomes user-card.
Example
Result: kebab-case result: user-card nav-bar-item html-editor; Names processed: 3.
UserCard NavBarItem HTMLEditor
user-card nav-bar-item html-editor
Limits and caveats
- A name with no capital to mark the word break, such as username or an Arabic name, cannot be split.
- Converting back may not restore the original exactly: an acronym such as HTML comes back as Html.
Questions about this tool
Why do custom elements need a hyphen?
The HTML standard requires a custom element name to contain a hyphen, so the UserCard component is registered under a name such as user-card.
Is it useful with Vue and Angular?
Yes, Vue accepts the UserCard component as user-card in templates, and Angular uses kebab-case for selectors and file names.
Do brackets and symbols around the name change?
No, <UserCard /> becomes <user-card /> and the symbols stay as they are.