
Harun MahmudEvery developer has been there — you copy a variable name from one codebase and it's in the wrong...
Every developer has been there — you copy a variable name from one codebase and it's in the wrong case for your project. Or you're converting a database column name to a JavaScript variable. Or you need to turn a human-readable label into a URL slug.
Text case conversion is one of those small tasks you do dozens of times a day. Here's a complete guide to every case format and when to use each one.
Words are joined together, first word lowercase, subsequent words capitalized.
helloWorld
firstName
getUserById
myVariableName
Used for: JavaScript/TypeScript variables, function names, object properties, JSON keys.
Same as camelCase but the first letter is also capitalized.
HelloWorld
FirstName
GetUserById
MyComponent
Used for: React components, TypeScript interfaces, class names, constructors.
Words are separated by underscores, all lowercase.
hello_world
first_name
get_user_by_id
my_variable_name
Used for: Python variables, database column names, Ruby, file names in some projects.
All uppercase with underscores.
HELLO_WORLD
MAX_RETRY_COUNT
API_BASE_URL
DATABASE_HOST
Used for: Constants, environment variables, config values.
Words separated by hyphens, all lowercase.
hello-world
first-name
get-user-by-id
my-component
Used for: CSS class names, HTML attributes, URL slugs, file names, CLI flags.
Each word starts with a capital letter.
Hello World
First Name
Get User By Id
My Variable Name
Used for: Page titles, headings, button labels, UI text.
Words separated by dots, all lowercase.
hello.world
first.name
config.database.host
Used for: Config file keys, logging namespaces, some API response formats.
| Case | Example | Common Use |
|---|---|---|
| camelCase | myVariable |
JS variables, JSON keys |
| PascalCase | MyComponent |
Classes, React components |
| snake_case | my_variable |
Python, databases |
| SCREAMING_SNAKE | MY_CONSTANT |
Constants, env vars |
| kebab-case | my-variable |
CSS, URLs, HTML |
| Title Case | My Variable |
UI labels, headings |
| dot.case | my.variable |
Config, namespaces |
const str = "hello world example";
// to camelCase
const camel = str.replace(/\s(.)/g, (_, c) => c.toUpperCase());
// "helloWorldExample"
// to PascalCase
const pascal = str.replace(/(^\w|\s\w)/g, c => c.trim().toUpperCase());
// "HelloWorldExample"
// to snake_case
const snake = str.replace(/\s+/g, '_').toLowerCase();
// "hello_world_example"
// to kebab-case
const kebab = str.replace(/\s+/g, '-').toLowerCase();
// "hello-world-example"
// to SCREAMING_SNAKE_CASE
const screaming = str.replace(/\s+/g, '_').toUpperCase();
// "HELLO_WORLD_EXAMPLE"
import re
text = "hello world example"
# to snake_case
snake = text.replace(" ", "_").lower()
# "hello_world_example"
# to kebab-case
kebab = text.replace(" ", "-").lower()
# "hello-world-example"
# to PascalCase
pascal = "".join(word.capitalize() for word in text.split())
# "HelloWorldExample"
# to camelCase
words = text.split()
camel = words[0].lower() + "".join(w.capitalize() for w in words[1:])
# "helloWorldExample"
Writing a one-off conversion function every time gets old fast. A dedicated tool lets you paste any text and instantly see all formats side by side — camelCase, PascalCase, snake_case, kebab-case, SCREAMING_SNAKE, Title Case, dot.case and more in one click.
👉 ToolsCraft Text Case Converter — paste any text, convert to any case instantly. Free, works in your browser, no account needed.
The case confusion gets worse when you're working across different parts of a stack:
snake_case columnscamelCase JSON keys
kebab-case classesSCREAMING_SNAKE_CASE
PascalCase
All from the same underlying concept — just named differently depending on where it lives. A quick converter saves you the mental overhead of doing it by hand every time.
Which case format trips you up most often when switching between languages or frameworks? Drop it in the comments 👇