kebab-case Converter
Convert any text to kebab-case. Lowercase words joined by hyphens — the standard for CSS class names, URL slugs, and npm package names.
Enter some text above to see all case conversions
About kebab-case
kebab-case (also "spinal-case" or "train-case" in some style guides) lowercases words and joins them with hyphens. "User Profile Email" becomes "user-profile-email"; "API Request Count" becomes "api-request-count". Named after its resemblance to words skewered on a kebab, the format dominates in places where the identifier is also a surface the browser, search engine, or user interacts with: URLs, CSS class names, HTML attributes, and package names. Why kebab-case over snake_case in the web world: URLs can't contain underscores in SEO-friendly slugs (Google treats hyphens as word separators and underscores as part of the word — "my_post" is read as "mypost", which doesn't rank for either "my" or "post"). CSS class names historically couldn't use camelCase reliably (pre-IE9 had case-handling quirks in class attribute matching), so the ecosystem settled on kebab. HTML attributes are case-insensitive and would corrupt camelCase; kebab survives intact. Use kebab-case for: CSS class names, HTML data-attributes (data-user-id), URL path segments (/user-settings/account-email), npm package names (official policy — no uppercase, no underscores), URL query parameter keys in some APIs, CLI flag names (--dry-run), filenames for human-readable docs (user-guide.md), HTML custom element names (required to contain a hyphen per spec).
Features
- Convert text to uppercase, lowercase, or title case
- Support for camelCase, snake_case, and kebab-case
- Sentence case and other formatting options
- Copy converted text to clipboard instantly
How to Use
- Paste or type your text into the input area
- Click the desired case conversion button
- View the converted text in the output area
- Copy the result using the copy button
Frequently Asked Questions
Why are npm package names required to use kebab-case?
npm policy since the registry's earliest days: package names must be URL-safe and filesystem-safe across all major operating systems. That rules out uppercase (case-insensitive filesystems collide) and underscores (most package-name conventions in the wider JS world were already kebab). The policy is enforced at publish time.
Are hyphens better than underscores in URL slugs for SEO?
Yes, and the difference is real. Google treats hyphens as word separators and underscores as part of the word. "my-post" is read as "my post" (ranking for both words); "my_post" is read as "mypost" (ranking for neither). Matt Cutts confirmed this in 2007 and the rule has never changed.
Can I use kebab-case in JavaScript variable names?
No — the hyphen is a subtraction operator. `const user-id = 1` is a syntax error (or worse, a subtraction). Use kebab-case only in strings, URL paths, CSS class names, and HTML attributes. For identifiers, use camelCase.
What's the difference between kebab-case and "spinal-case"?
Same thing, different nicknames. Some style guides and libraries use "spinal-case" or "train-case" interchangeably. They all mean lowercase words joined by hyphens. You'll see "kebab" most often in JS ecosystems, "spinal" occasionally in older documentation.
Other Text Case Converter variants
camelCase
Convert any text to camelCase. Remove spaces and punctuation, lowercase the first word, capitalise the rest. Standard JavaScript variable-naming convention.
snake_case
Convert any text to snake_case. Lowercase words joined by underscores — the Python, Ruby, and SQL column convention.
PascalCase
Convert text to PascalCase. Capitalise every word, remove spaces and punctuation — the convention for class names, React components, and .NET types.
Title Case
Convert any text to Title Case. Capitalise the first letter of each word, keep whitespace — for book titles, chapter headings, and AP-Style headlines.