Convert kebab-case to camelCase

kebab-case to camelCase Converter

When CSS, HTML, or URL data enters JavaScript, kebab-case segments need camelCase object keys. When you read a CSS custom property into a JavaScript object, or when you map an HTML data attribute to a component prop, you need this conversion. "background-color" becomes "backgroundColor" and "data-user-id" becomes "dataUserId".

Furthermore, URL slugs are kebab-case, but the corresponding JavaScript variable or object key is camelCase. This tool handles the conversion for any kebab-case input.

Where kebab-case needs camelCase equivalents

The DOM style API uses camelCase: element.style.backgroundColor, not element.style.background-color.¹ React's inline style prop requires camelCase property names for the same reason.² HTML data attributes read via the dataset API are automatically camelCased by the browser without any extra mapping code: data-user-id becomes dataset.userId and data-product-name becomes dataset.productName for every kebab-case attribute you add to the document object model.³

DOM style and dataset mappings

The DOM style API requires camelCase property names even though the CSS source uses kebab-case. "background-color" becomes "element.style.backgroundColor", and "font-size" becomes "element.style.fontSize". Similarly, the browser's dataset API automatically converts kebab-case HTML attribute names to camelCase JavaScript property names: "data-user-id" becomes "dataset.userId". Building on this, any configuration object that mirrors CSS properties, such as the style objects used in CSS-in-JS libraries, uses camelCase for the JavaScript side.

CSS-in-JS libraries inherit the same camelCase requirement on the JavaScript side. A styled-components or Emotion style object keys its properties in camelCase so that the value you assign maps directly onto the corresponding DOM style property. When the same design token is referenced in a CSS file as kebab-case and in a style object as camelCase, generating both names from one source avoids the bug where the CSS declaration and the JavaScript key disagree on casing. The browser applies the style only when both sides resolve to the identical property, so a single conversion step keeps them consistent.

Edge cases: multiple hyphens and numeric segments

Multiple consecutive hyphens are collapsed to a single word boundary, so two hyphens followed by a word produces a single camelCase transition. Numbers after a hyphen are treated as the start of a new word: "h1-tag" becomes "h1Tag". Yet numbers at the start of an identifier produce output like "1stResult", which is not a valid JavaScript identifier. Review output when the source contains numeric prefixes. CSS custom property names that begin with the standard two-hyphen prefix, such as "font-size-body" with its prefix attached, should have the prefix removed before conversion; otherwise the leading hyphens produce an empty first segment. PascalCase segments within kebab-case input, like "fontSize-body", are treated as a single word because the converter only splits on hyphens, not on camelCase boundaries within segments. For the cleanest results, normalize your kebab-case input to all-lowercase single words before converting.

Workflow: reading CSS custom properties in JavaScript

Building on this, when you have a list of CSS custom property names and want the JavaScript object keys for a CSS-in-JS mapping, paste the CSS names without the two-hyphen prefix, convert to camelCase, and use the output as your object keys. For example, "color-primary" becomes "colorPrimary" and "font-size-body" becomes "fontSizeBody". CapyToolkit converts each line independently, making bulk conversion straightforward. For CSS-in-JS libraries like styled-components or Emotion, the camelCase keys in your style objects match the JavaScript convention while the kebab-case equivalents match the CSS source. When you need to toggle between reading a CSS custom property value and setting a JavaScript style property, having both naming formats from the same source string prevents the common bug where a camelCase key is used in a getPropertyValue call and silently returns an empty string.

Reading CSS custom properties in JavaScript with getPropertyValue and dataset

Reading CSS custom property values in JavaScript requires using the exact kebab-case name with getComputedStyle(el).getPropertyValue(customPropertyName). When you store the token name as a camelCase JavaScript variable and need the kebab-case CSS name to read it, this converter produces the exact CSS name from the identifier you already have. Any mismatch in casing between the declaration and the read call results in an empty string returned silently, with no exception thrown to alert you to the bug.

A design system that exports token names as camelCase constants uses the kebab-case form when reading the value from the DOM. The JavaScript call uses the property name after the two-hyphen prefix with getPropertyValue. Paste your camelCase token constant names into this converter to generate the exact CSS custom property names for the getPropertyValue call. Mismatches between the camelCase constant and the kebab-case CSS name produce empty strings silently.

CSS custom properties require the exact kebab-case name

Unlike standard CSS property names, custom property names are case-sensitive once the two-hyphen prefix is in place.⁴ A property named "Color-Primary" with the prefix differs from "color-primary" with the prefix, and the browser treats them as two separate values. When you read a custom property in JavaScript, the string passed to getPropertyValue must match the declaration exactly, including the case of every character after the prefix. Paste your declared property names in and you get the exact CSS name getPropertyValue expects before you write the JavaScript that reads it. The output from this tool matches the format required by getPropertyValue and setProperty.

Angular property binding: from kebab-case HTML attributes to TypeScript inputs

Angular uses kebab-case for HTML attribute names in templates and camelCase for TypeScript class properties and @Input() decorators.⁵ This two-format system is built into the Angular architecture: HTML attribute syntax uses kebab-case because the HTML specification requires it for attribute names, while TypeScript class members follow camelCase. Maintaining this convention consistently across every component in your codebase keeps template bindings predictable and prevents the subtle runtime errors that appear when a kebab-case attribute does not match its corresponding input decorator name.

An Angular component with @Input() userId: string receives the value through the template attribute [user-id]="userId" in a parent template. Angular's template compiler handles the mapping from the kebab-case attribute to the camelCase input property. When you read the Angular documentation for a third-party component library, the listed @Input() names are camelCase, but the attribute you write in your template is the kebab-case equivalent. Use this converter to produce the template attribute name from the TypeScript input name.

Component selector naming and the kebab-case selector convention

Angular component selectors use kebab-case: selector: 'app-user-card'. The component class name is PascalCase: class UserCardComponent. Converting between these two formats when building new components follows the same rule: the selector is the kebab-case version of the component name. Paste your PascalCase component names into this converter to generate the corresponding selectors before writing the component decorator. CapyToolkit processes each line independently, so generating selectors for a list of new component names takes one paste.

When to use this

Use this when mapping CSS property names to JavaScript style object keys, converting HTML data attribute names to JavaScript property names, or building a camelCase API client from kebab-case URL segments.

Examples

color-primary
spacing-md
font-size-body
border-radius

colorPrimary
spacingMd
fontSizeBody
borderRadius

data-user-id
data-product-name
data-category-id

dataUserId
dataProductName
dataCategoryId