How to Convert Between camelCase, snake_case and kebab-case
See what camelCase, PascalCase, snake_case, CONSTANT_CASE and kebab-case look like, where each is used, and how to convert a name from one to another, acronyms and numbers included.
camelCase joins the words of a name and capitalizes each new word (userId), snake_case joins lowercase words with underscores (user_id), and kebab-case joins them with hyphens (user-id). To convert one into another, split the name into its words and join them again in the new style, or paste it into the Text Case Converter, which shows all ten styles at once.
The same name, user id, in the six identifier styles:
| Style | Result | How it is written |
|---|---|---|
| camelCase | userId | The first word is lowercase, and every word after it starts with a capital |
| PascalCase | UserId | Every word starts with a capital |
| snake_case | user_id | Lowercase words joined with underscores |
| CONSTANT_CASE | USER_ID | Uppercase words joined with underscores |
| kebab-case | user-id | Lowercase words joined with hyphens |
| dot.case | user.id | Lowercase words joined with dots |
Where is each naming style used?
| Style | Example | Where you will see it |
|---|---|---|
| camelCase | userName | JavaScript methods, parameters and local variables. The Google JavaScript Style Guide calls it lowerCamelCase. |
| PascalCase | UserName | Class names: UpperCamelCase in the Google JavaScript Style Guide, and CapWords in PEP 8. |
| snake_case | user_name | Python function, variable and method names: PEP 8 asks for lowercase with words separated by underscores. |
| CONSTANT_CASE | MAX_RETRY_COUNT | Constants. The Google JavaScript Style Guide uses the name CONSTANT_CASE, and PEP 8 writes constants in all capital letters with underscores between words. |
| kebab-case | user-name | URLs, where Google recommends hyphens over underscores, and CSS, whose property names are hyphenated (background-color). |
| dot.case | user.name | Names that use dots as separators. The converter joins the words with dots. |
The rules come from the style guides themselves: PEP 8 for Python, the Google JavaScript Style Guide for JavaScript, and Google's URL structure guidance for URLs. Your own project or team may follow a different one, so check it before you rename things.
The other two styles in the converter are for prose, not names: Title Case (The Lord Of The Rings) and Sentence case (The lord of the rings), plus plain lowercase and UPPERCASE.
How do I convert a name from one style to another?
Every conversion does the same three things: split the name into words, lowercase them, and join them the way the new style asks. The style the name started in does not matter, because the splitting finds the words in all of them.
| Name | Convert to | Result |
|---|---|---|
| userName | snake_case | user_name |
| user_name | camelCase | userName |
| user_name | kebab-case | user-name |
| getUserById | snake_case | get_user_by_id |
| background-color | camelCase | backgroundColor |
| MAX_RETRY_COUNT | camelCase | maxRetryCount |
| my-component-name | PascalCase | MyComponentName |
Some conversions cross a boundary between two worlds. A CSS property such as background-color is backgroundColor on element.style in JavaScript: MDN says that this object has dash-named and camel-case named properties for every supported CSS property.
How is a name split into words?
The converter breaks a name into words in two ways. It splits at separators (a space, _, -, . and /), and it splits inside a name where the capitals are:
| Name | Words | Why |
|---|---|---|
| userName | user, name | A lowercase letter meets a capital |
| user2Id | user2, id | A digit meets a capital, so snake_case gives user2_id |
| html5Parser | html5, parser | A letter followed by a digit is not a break, so snake_case gives html5_parser |
| XMLHttpRequest | xml, http, request | A run of capitals followed by a capitalized word: the last capital starts the new word |
| getHTTPResponse | get, http, response | The same rule: HTTP stays together, and Response starts a new word |
| foo--bar__baz | foo, bar, baz | A run of separators counts as one |
| snake_case-and.dots/slashes | snake, case, and, dots, slashes | A space, _, -, . and / all separate words in the six identifier styles |
Letters that are not ASCII work too: élan vital becomes élanVital and élan_vital.
What happens to acronyms and numbers?
Every word is lowercased before the words are joined, so an acronym does not keep its capitals. XMLHttpRequest becomes xmlHttpRequest in camelCase and xml_http_request in snake_case, and new customer ID becomes newCustomerId.
That is the rule of the Google JavaScript Style Guide, whose own examples are xmlHttpRequest and newCustomerId, and not XMLHTTPRequest and newCustomerID. PEP 8 asks for the opposite in a class name: capitalize all the letters of an acronym, so HTTPServerError and not HttpServerError. The converter gives you HttpServerError, so for Python class names put the capitals back by hand.
Names that do not split the way you expect
The converter looks only at the capital letters, so a name with an unusual mix of cases can be split in a surprising place:
| Name | The converter gives | Why |
|---|---|---|
| OAuth2 | snake_case: o_auth2 | A run of capitals followed by a capitalized word splits O from Auth2 |
| PDFs | snake_case: pd_fs | The F and the s are read as the start of a new word |
| iPhone | snake_case: i_phone | A lowercase letter meets a capital |
| macOS | snake_case: mac_os | A lowercase letter meets a capital |
| HTTPServerError | PascalCase: HttpServerError | Every word is lowercased first, so the acronym loses its capitals |
Check results like these and fix them by hand. Because the capitals are the only clue, a round trip loses information: HTTPServerError to snake_case is http_server_error, and back to PascalCase is HttpServerError.
Numbers
A digit stays with the letters before it, so html5Parser is html5_parser, not html_5_parser. A digit followed by a capital starts a new word: user2Id is user2_id. A dot between digits is a separator in the identifier styles, so version 3.5 becomes version_3_5 in snake_case and version35 in camelCase, where the digits run together. Edit those by hand.
How are Title Case and Sentence case different?
- Title Case capitalizes every word, small ones included:
the lord of the ringsbecomesThe Lord Of The Rings. The converter does not know which small words your style guide leaves lowercase, so edit those by hand. It also lowercases an acronym first, soNASA launches rocketbecomesNasa Launches Rocket. - Sentence case capitalizes only the first word of each line, not the first word of each sentence:
first line. second linebecomesFirst line. second line. - Both keep punctuation, and they do not split at
.or/:version 3.5becomesVersion 3.5. The six identifier styles keep only letters and digits, soHello, World!becomeshelloWorldin camelCase andHello, World!in Title Case, and$userNamebecomesuserNamein camelCase but stays$user Namein Title Case.
Which style should I use in a URL?
Use kebab-case. Google recommends separating the words in a URL with hyphens instead of underscores, because hyphens help users and search engines better identify concepts in the URL. Google also treats URLs as case sensitive, so /Apple and /apple are different URLs, and it is simplest to write a URL in one case. The converter's kebab-case output is always lowercase.
What is specific to the Text Case Converter?
- It shows all ten styles at once: camelCase, PascalCase, snake_case, CONSTANT_CASE, kebab-case, dot.case, Title Case, Sentence case, lowercase and UPPERCASE, each with its own Copy button.
- It converts every line separately, so you can paste a whole list of names.
user_id,XMLHttpRequestandHello Worldon three lines giveuserId,xmlHttpRequestandhelloWorldin camelCase. - Extra spaces around and between the words are ignored.
- When a style has nothing at all to show for your input, such as the identifier styles for
!!!, its card shows a dash. - Everything runs in your browser, and nothing you type is uploaded.
Try the Text Case Converter
Open the Text Case Converter, paste a few names, one per line, and copy the style you need. Try OAuth2 or getHTTPResponse to see how the splitting works. If the name goes into a URL, the guide to URL encoding covers the characters that have to be percent-encoded.
How to convert between camelCase, snake_case and kebab-case
1. Enter the names, one per line
Paste or type one or more names. The Text Case Converter works through every line separately and ignores extra spaces around the words.
2. Copy the style you need
The converter shows all ten styles at once, each with its own Copy button. Take camelCase for JavaScript variables, snake_case for Python, and kebab-case for URLs.
3. Check acronyms and brand names
Every word is lowercased before the words are joined, so HTTPServerError becomes HttpServerError in PascalCase, and a name such as iPhone or OAuth2 is split at its capital letters. Fix these by hand.
4. Follow your language's style guide
Check the naming rules of your language or team, such as PEP 8 for Python or the Google JavaScript Style Guide, and adjust the result where they differ.
5. Use hyphens in URLs
Google recommends separating the words in a URL with hyphens instead of underscores, so use kebab-case there and keep the case of each URL consistent.
// Frequently Asked Questions
What is the difference between camelCase and PascalCase?
Both join the words with no separator and capitalize every new word. camelCase starts with a lowercase letter, as in userName, and PascalCase starts with an uppercase letter, as in UserName. The Google JavaScript Style Guide calls them lowerCamelCase and UpperCamelCase.
How do I convert camelCase to snake_case?
Split the name where a lowercase letter or a digit meets a capital letter, lowercase every word and join the words with underscores: getUserById becomes get_user_by_id. The Text Case Converter does this for every line you paste, and gives you the other styles at the same time.
Should I use hyphens or underscores in URLs?
Hyphens. Google recommends separating the words in a URL with hyphens instead of underscores, because hyphens help users and search engines better identify concepts in the URL, so kebab-case is the style to use for the words in a URL path.
Why did the converter lowercase my acronym?
It lowercases every word before joining them, so XMLHttpRequest becomes xmlHttpRequest and HTTPServerError becomes HttpServerError. That matches the Google JavaScript Style Guide, which writes xmlHttpRequest and newCustomerId. PEP 8 asks for HTTPServerError in a Python class name, so change those by hand.
Is my text uploaded to a server?
No. All conversion runs in your browser. The text you paste never leaves your tab.