Kebab Case Converter
Convert text to kebab-case. Kebab-case lowercases every word and joins them with hyphens (this-is-kebab-case). It is the standard for URL slugs, CSS class names, HTML attributes, and file names in many static-site generators. The converter also handles the reverse: kebab → camelCase, snake_case, PascalCase, and Title Case.
How to use the kebab case converter
1. Paste your input
Drop camelCase, snake_case, PascalCase, kebab-case, or plain prose into the input box. The converter scans on every keystroke and outputs the selected target case in real time.
2. Pick a target mode
"kebab-case" is the default (lowercase, hyphen-separated). Switch the pill row to snake_case, camelCase, PascalCase, or Title Case to convert in any direction. The tool understands all common source formats.
3. Copy out
The Copy button puts the converted string on your clipboard. Paste it into your code, CSS class name, URL slug, file name, or wherever you need the target convention.
When you need kebab case
URL slugs
Kebab-case is the dominant convention for URL slugs. "my-blog-post" reads cleanly, sorts lexicographically, and is search-engine-friendly. Most static site generators (Jekyll, Hugo, Eleventy, Astro) default to kebab-case for post slugs. See also: text to HTML.
CSS class names and HTML attributes
CSS conventions favor kebab-case: ".main-nav", ".article-header", ".btn-primary". BEM extends this with double-hyphens for modifiers (".btn--primary"). HTML data attributes also use kebab-case ("data-user-id").
File names
Lowercase-hyphen file naming is the safest cross-platform choice. "user-profile.png", "main-stylesheet.css", "company-logo.svg". Spaces and underscores create friction in URLs and shells.
Command-line flags
POSIX-style command-line flags use kebab-case for long-form options: "--max-depth", "--ignore-case", "--no-cache". Click, argparse, commander.js all default to this convention.
Vue and web component names
Vue.js and HTML custom elements require kebab-case in templates: `
Five programming cases at a glance
| Case | Example | Used for |
|---|---|---|
| kebab-case | user-profile-data | URL slugs, CSS classes, file names, CLI flags, HTML custom elements. |
| snake_case | user_profile_data | Python and Ruby variables, SQL columns, Rust function names. |
| camelCase | userProfileData | JavaScript variables, Java methods, Swift properties. |
| PascalCase | UserProfileData | Class names across most languages, TypeScript types, React components. |
| SCREAMING_SNAKE_CASE | USER_PROFILE_DATA | Constants, environment variables, macro names. |
The kebab case converter handles conversions between every pair of these (except SCREAMING_SNAKE, which the parent case converter covers). Paste a string in any case; pick the target; copy.
Edge cases the converter handles
- Acronym preservation: input "XMLParser" tokenizes as "xml" + "parser" → kebab "xml-parser". This is the standard for most style guides; it normalizes acronyms to lowercase tokens.
- Mixed input: input "user_profile-data XMLParser" mixes snake, kebab, space, and PascalCase. The converter tokenizes correctly and outputs cleanly.
- Numbers: digits attach to the preceding word ("html5" → "html5", "css3" → "css3"). They are not split into separate tokens.
- Single uppercase letters: "I" or "X" mid-string are treated as new tokens. "userIID" tokenizes as "user", "i", "i", "d" - careful with abbreviations that look like single letters.
What the converter doesn't handle
- Unicode characters: the tokenizer is ASCII-letter aware. Accented characters (é, ñ) stay as-is but aren't tokenized; mixing them in identifiers is generally a code-smell anyway.
- Non-English words: tokenization assumes camelCase / snake_case boundaries; arbitrary multilingual text won't tokenize meaningfully.
Related tools
Frequently asked questions
What is kebab-case?
Kebab-case lowercases every word and joins them with hyphens (e.g. 'my-tool-name'). It's the standard for URL slugs, CSS class names, HTML attributes, file names, and CLI flags.
How does the converter handle camelCase input?
It detects the case-transition boundaries (lowercase-then-uppercase pattern) and splits there. 'userProfileData' tokenizes as 'user', 'profile', 'data' then joins per target mode.
Can I convert from snake_case to kebab-case?
Yes. Paste 'user_profile_data', pick kebab-case mode, output is 'user-profile-data'. Bidirectional conversion across all five major case conventions.
Does kebab-case work in JavaScript variable names?
No. JavaScript identifiers can't contain hyphens - the hyphen is the subtraction operator. Use camelCase for JS variables. kebab-case is for HTML attributes, CSS classes, file names, and URLs.
What about acronyms like 'XMLParser'?
The converter normalizes acronyms to lowercase tokens. 'XMLParser' → 'xml-parser' in kebab-case. Most style guides recommend this; a few (older Microsoft .NET docs) capitalized only the first letter (XmlParser), but the lowercase-acronym style is now dominant.
Does the converter handle numbers in identifiers?
Numbers stay attached to the preceding word. 'html5Page' becomes 'html5-page'. 'css3Style' becomes 'css3-style'.
Will my code be sent to a server?
No. The conversion is pure JavaScript running in your browser. Code, variable names, and identifiers all stay in this tab.
Where is kebab-case used vs snake_case?
kebab for URL slugs / CSS / HTML / file names / CLI flags / Vue and custom element tags. snake for Python and Ruby variables / SQL column names / Rust functions. Different languages, different conventions; the converter handles either direction. See also: sentence case.
More wordcounter.ai tools
Other tools you might find useful.