How to convert text to kebab-case
- Paste your words or names into Input, one per line.
- Each line becomes lowercase words joined with hyphens.
- Copy the result or download it.
From code names to CSS and back
Front-end work moves between styles all the time. JavaScript writes style properties in camelCase (backgroundColor), CSS writes them in kebab-case (background-color), and components are often named in PascalCase (UserProfileCard) but saved as kebab-case files (user-profile-card.vue). Pasting a list of names here gives you the kebab-case versions in one go.
How the conversion works
Each line is handled on its own. The converter finds the words at spaces, underscores, punctuation and wherever a lowercase letter meets a capital, so HTMLParser becomes html-parser and main_nav_item becomes main-nav-item. Everything is then lowercased and joined with hyphens. For underscores instead, use the snake_case converter, and for a URL slug from a page title, use slugify.