Identifiers for URLs, CSS, and HTML
kebab-case is the identifier style for URL slugs, CSS class names, HTML attribute names, and many command-line flags. User Profile Page becomes user-profile-page: every word lowercased, joined with single dashes. The dash is the only separator; no underscores, no spaces, no caps.
The engine first tokenises your input by replacing underscores and dashes with spaces, splitting on lowercase-to-uppercase transitions, lowercasing everything, and splitting on whitespace. The tokens are then joined with -. The result is a clean kebab-case identifier no matter how the input was formatted.
Where it shows up: URL slugs (/user-profile-page/), CSS class names (.btn-primary), CSS custom property names (--brand-color), HTML attribute names (data-user-id), Lisp/Clojure identifiers, and command-line flags (--user-profile). Pair with Train-Case for capitalised header style and snake_case for the underscore variant.
How to use convert text to kebab-case
- 1Paste or type your phrase into the input panel on the left.
- 2The kebab-case identifier appears in the output panel on the right as you type.
- 3Mixed input is fine:
UserProfile,user_profile, andUSER PROFILEall produceuser-profile. - 4Click Copy in the output header to paste the slug into your URL, CSS, or HTML.
- 5For underscores, use snake_case; for header-style dashes, use Train-Case.
Keyboard shortcuts
Drive TextResult without touching the mouse.
| Shortcut | Action |
|---|---|
| Ctrl F | Open the find & replace panel inside the input Plus |
| Ctrl Z | Undo the last input change |
| Ctrl Shift Z | Redo |
| Ctrl Shift Enter | Toggle fullscreen focus on the editor Plus |
| Esc | Close find & replace, or exit fullscreen |
| Ctrl K | Open the command palette to jump to any tool Plus |
| Ctrl S | Save current workflow draft Plus |
| Ctrl P | Run a saved workflow Plus |
What this tool actually does
Word boundary detection
Same tokeniser as camelCase. Underscores, dashes, whitespace, and lowercase-to-uppercase transitions all count as word boundaries, so any input format produces a consistent kebab-case output.
Lowercase joining with dashes
Tokens are emitted in lowercase and joined with a single dash. USER PROFILE -> user-profile. For capitalised words with dashes (User-Profile), use Train-Case instead.
Already-formatted input round-trips
Pasting user-profile-page back in still produces user-profile-page. The tokeniser splits on the existing dashes, lowercases each token, and rejoins.
Multiple separators collapse
Runs of dashes, underscores, or spaces collapse to a single dash in the output. user---profile and user__profile both become user-profile.
URL-safe output (within reason)
Lowercase ASCII letters, digits, and dashes are URL-safe without encoding. The tokeniser does not strip punctuation or non-ASCII characters, so if your input contains those, run remove special characters first to get a clean slug.
Worked example
Spaces, camelCase boundaries, and shouty caps all collapse to the same kebab-case result. Digits stick to their word, so 4821 stays attached to order.
User Profile Page fetchUserById ORDER 4821 details
user-profile-page fetch-user-by-id order-4821-details
Settings reference
| Input | kebab-case output |
|---|---|
user profile |
user-profile |
user_profile |
user-profile |
UserProfile |
user-profile (boundary via lower-to-upper split) |
USER PROFILE |
user-profile |
user---profile |
user-profile (runs collapse to single dash) |
user2 profile |
user2-profile (digits stick to their word) |
FAQ
Is kebab-case the same as a URL slug?
How is kebab-case different from snake_case?
user-profile); snake_case uses underscores (user_profile). Both lowercase. Use kebab-case for URLs, CSS, and HTML; snake_case for Python and SQL.Will it handle camelCase input?
userProfileData produces user-profile-data.How is kebab-case different from Train-Case?
user-profile); Train-Case capitalises every word (User-Profile). Both use dashes as separators. Train-Case is sometimes used for HTTP header names like Content-Type.