camelCase, snake_case, kebab-case: How to Convert Between Naming Styles

The problem: one name, five spellings

Every codebase mixes naming conventions. Your database columns are snake_case, your JavaScript variables are camelCase, your React components are PascalCase, your CSS classes and URLs are kebab-case, and your environment variables are SCREAMING_SNAKE_CASE. Retyping an identifier by hand every time it crosses one of those boundaries is slow and error-prone, and a single typo in a config key or API field can cost you an hour of debugging.

A case converter takes one phrase and rewrites it into whichever convention you need, so you can copy a column name straight into a TypeScript interface or turn a page title into a class name without touching the shift key.

How case conversion actually works

Under the hood, converting between cases is a two-step process: split the input into words, then join them back with the right separator and capitalization. The hard part is the split, because the boundaries between words are encoded differently in each style: a space, an underscore, a hyphen, or a lowercase-to-uppercase transition.

Here is a compact splitter that handles the common cases:

function splitWords(str) {
  return str
    .replace(/([a-z0-9])([A-Z])/g, '$1 $2') // camelCase boundary
    .replace(/[_\-]+/g, ' ')                // snake_ and kebab-
    .trim()
    .split(/\s+/);
}

splitWords('getUserId');      // ["get", "User", "Id"]
splitWords('api_base_url');   // ["api", "base", "url"]
splitWords('data-source-id'); // ["data", "source", "id"]

Once you have an array of words, each target style is a simple transform:

const words = splitWords('userFirstName');

const camel = words.map((w, i) =>
  i === 0 ? w.toLowerCase()
          : w[0].toUpperCase() + w.slice(1).toLowerCase()
).join('');                                   // "userFirstName"

const snake = words.map(w => w.toLowerCase()).join('_'); // user_first_name
const kebab = words.map(w => w.toLowerCase()).join('-'); // user-first-name
const constant = words.map(w => w.toUpperCase()).join('_'); // USER_FIRST_NAME

A practical walkthrough

Say your API returns first_name, last_name, and date_of_birth, and you want a TypeScript type with camelCase properties. Paste the three keys into the Case Converter, choose camelCase, and you get firstName, lastName, and dateOfBirth ready to drop into an interface. Going the other way, turning a component name like UserProfileCard into a stylesheet name user-profile-card.css, is the same operation with a kebab-case target.

Common pitfalls

• Acronyms. The regex above treats getHTTPResponse as get + HTTPResponse because there is no lowercase letter between the capitals. If acronyms matter, add a rule like /([A-Z]+)([A-Z][a-z])/ to split HTTPResponse into HTTP + Response.
• Numbers. Decide up front whether address2 is one word or two. Most slug and class-name systems keep digits attached to the preceding word.
• Non-ASCII letters. Accented characters like é are valid in identifiers in some languages but not others; strip or transliterate them if the target is a URL or CSS class.
• Round-tripping. Converting to Title Case and back is lossy: iOS becomes Ios. Keep the original if you need to preserve exact capitalization.

Related conversions

If your end goal is a URL, the Slug Generator adds accent stripping and punctuation removal on top of kebab-casing. And when you are converting API responses into typed models, the JSON to TypeScript tool can generate whole interfaces at once.

Conclusion

Case conversion is a tiny problem you hit dozens of times a day. Understanding the split-then-join model means you will never be surprised by an acronym or a stray underscore again, and when you just need the answer, the Case Converter runs entirely in your browser, so nothing you paste ever leaves your machine.