Kebab Case Converter - Free Online Tool

Enter your text

kebab-case

COBOL-CASE

About Kebab Case Converter — Kebab Case Converter Online

The Kebab Case Converter Online instantly transforms any text into kebab-case format — lowercase words joined by hyphens. Developers, designers, and content creators use it to convert natural-language labels, camelCase identifiers, PascalCase component names, and snake_case variables into the hyphenated format required by CSS, URLs, file systems, and npm packages. No installation or sign-up required.

Manually converting text to kebab-case is tedious and error-prone, especially when working across naming conventions. A variable called getUserProfileData becomes get-user-profile-data; a page title like "My First Blog Post" becomes my-first-blog-post. This kebab case converter online handles camelCase word boundaries, PascalCase capitals, underscores, and mixed whitespace automatically — so you get a consistent result in milliseconds without writing a regex.

How to Use the Kebab Case Converter

Type or paste your text into the Enter your text input field — any format works: plain English, camelCase, PascalCase, snake_case, or a mix.
The kebab-case output updates in real-time as you type, no button press required.
The COBOL-CASE (uppercase kebab) variant is shown below for environments that require uppercased hyphen-separated identifiers.
Click the Copy button next to the format you need to copy it to your clipboard.
Click Clear to reset the input and start fresh with new text.

Where Is Kebab-Case Used?

Kebab-case is the dominant naming convention in web development for any context where hyphens are valid separators. Knowing where it applies saves you from inconsistency across a codebase.

CSS class names: The CSS community convention is kebab-case for class and ID names — e.g., .nav-bar, .primary-button, .hero-section. BEM methodology extends this with double hyphens for modifiers.
URL slugs: Search engines and web frameworks use kebab-case for page slugs — e.g., /blog/my-first-post/. Google explicitly recommends hyphens over underscores for URL word separation.
HTML data attributes: Custom HTML attributes follow kebab-case by convention — e.g., data-user-id, data-product-sku. These are accessed in JavaScript via element.dataset.userId.
File and folder names: Kebab-case is preferred for project files in JavaScript/TypeScript projects — e.g., my-component.tsx, api-helpers.ts — because it avoids case-sensitivity issues on case-insensitive file systems like macOS and Windows.
npm package names: All npm package names are kebab-case or lowercase — e.g., react-dom, lodash-es, date-fns. The npm registry enforces lowercase, and hyphens are the standard separator.

Tips for Getting the Best Results

The converter handles most input formats automatically, but these tips cover edge cases you may encounter.

Multi-line input: If you paste multiple lines, the converter treats each newline as a word boundary and joins everything into a single kebab-case string. To convert lines independently, process them one at a time or split your input before pasting.
Acronyms and abbreviations: Acronyms like "HTML", "API", or "URL" are treated as a single word by the converter and become a single lowercase segment — html, api, url. For example, parseHTMLContent becomes parse-html-content, which is the expected CSS/URL convention.
Numbers in identifiers: Numbers are preserved as-is and treated as part of the word segment they appear in — section2Title becomes section2-title. If you need the number as a separate segment (e.g., section-2-title), add a space or underscore before it in the source text.
Special characters: Punctuation other than underscores (such as ., /, @, or brackets) is treated as whitespace and becomes a word boundary. This means [email protected] converts to user-domain-com, which may or may not be what you want.
Use COBOL-CASE for HTTP headers: Some HTTP header naming conventions use uppercase hyphenated format — e.g., X-Request-ID, Content-Type. The COBOL-CASE output (uppercase kebab) is the quickest way to get this format.

Why Use a Kebab Case Converter Online

A browser-based kebab case converter eliminates the need to write a regex, open a terminal, or switch between tools. It handles all the edge cases — camelCase boundary detection, consecutive capitals, mixed delimiters — instantly and consistently. Because the conversion happens entirely client-side, there is no need to create an account, and nothing you type is sent to a server.

Frontend developers use it when renaming CSS classes during a refactor. Content managers use it to generate URL slugs from article titles. Designers use it to name design tokens and component variants in Figma and Storybook. Anyone working across teams where naming conventions differ benefits from a single reliable converter that produces consistent output every time.

Frequently Asked Questions about Kebab Case Converter

The name is a visual metaphor: words separated by hyphens resemble chunks of food threaded on a kebab skewer, with the hyphens representing the skewer itself. It goes by several other informal names too — "spinal-case" (the hyphens look like a spine), "caterpillar-case" (words crawling along the hyphens), and "lisp-case" (because the Lisp programming language uses hyphenated identifiers extensively). Despite the whimsical name, kebab-case is a standard convention in professional web development.

Google's official webmaster guidance recommends hyphens for word separation in URLs. Search engine crawlers treat a hyphen as a word separator (so my-blog-post is indexed as three separate words), whereas underscores are treated as word connectors (my_blog_post is indexed as one compound word). This means kebab-case URLs typically perform better in search than snake_case URLs for multi-word keyword phrases.

COBOL-CASE (also called TRAIN-CASE or SCREAMING-KEBAB-CASE) is simply kebab-case with all letters uppercased — e.g., MY-VARIABLE-NAME. It gets its name from COBOL, a programming language that traditionally uses uppercase hyphenated identifiers. Today it is occasionally used for HTTP header names (e.g., X-Request-ID), environment variable namespaces, and some configuration formats that require uppercase hyphenated keys.

The converter detects camelCase and PascalCase word boundaries by looking for transitions from a lowercase letter to an uppercase letter (e.g., getUserData splits into "get", "User", "Data") and from a run of uppercase letters followed by a lowercase letter (e.g., parseHTMLContent splits into "parse", "HTML", "Content"). All segments are then lowercased and joined with hyphens, producing get-user-data and parse-html-content respectively.

Yes, completely free with no account and no usage limits. The kebab case converter runs entirely in your browser — no data is sent to a server, and there is no tracking of what you type. It also works offline after the initial page load, so you can keep converting identifiers even without an internet connection.

Yes. The converter is fully responsive and works on smartphones and tablets. The input field, real-time output, and copy buttons are all accessible on touchscreens. The live conversion fires on every keystroke, so you see the result update immediately as you type or dictate text on a mobile keyboard.

Yes. You can paste any amount of text — a sentence, a paragraph, or a list of identifiers — and the converter will process the entire input as a single kebab-case string. If you need to convert a list of items and keep them as separate outputs, process each item individually by pasting one at a time or by splitting your list before using the tool.

Both conventions use lowercase words, but they differ in their separator character: kebab-case uses a hyphen (-) while snake_case uses an underscore (_). In most programming languages, hyphens are not valid in variable names (they look like subtraction), so snake_case is preferred for variable and function names in Python, Ruby, and SQL. Kebab-case is preferred for CSS, URLs, HTML attributes, and file names where hyphens are valid and conventional.