Harun Mahmud

Posted on May 16

Text Case Converter: The Complete Guide to camelCase, snake_case, kebab-case and More

#webdev #tools #javascript #productivity

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.

The Most Common Cases

camelCase

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.

PascalCase (UpperCamelCase)

Same as camelCase but the first letter is also capitalized.
HelloWorld
FirstName
GetUserById
MyComponent

Used for: React components, TypeScript interfaces, class names, constructors.

snake_case

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.

SCREAMING_SNAKE_CASE

All uppercase with underscores.
HELLO_WORLD
MAX_RETRY_COUNT
API_BASE_URL
DATABASE_HOST

Used for: Constants, environment variables, config values.

kebab-case

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.

Title Case

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.

dot.case

Words separated by dots, all lowercase.
hello.world
first.name
config.database.host

Used for: Config file keys, logging namespaces, some API response formats.

Quick Reference Table

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

How to Convert in JavaScript

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"

How to Convert in Python

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"

Stop Converting Manually

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.

When You're Working Across Languages

The case confusion gets worse when you're working across different parts of a stack:

Your database uses snake_case columns
Your API response uses camelCase JSON keys
Your CSS uses kebab-case classes
Your constants use SCREAMING_SNAKE_CASE
Your React components use 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 👇

DEV Community