Kebab-case to camelCase
Paste any kebab-case identifier — lowercase words joined by hyphens like
my-variable-name — and get the equivalent camelCase string such as
myVariableName instantly. This is a common need when moving CSS class names,
HTML data attributes, or URL slugs into JavaScript or TypeScript variable names,
object properties, and API payload keys.
The core problem this solves
Kebab-case is standard in CSS (font-size, background-color) and in URL slugs
(/product-detail-page). JavaScript and TypeScript, however, do not allow
hyphens in identifier names because the hyphen is an operator. When you are
bridging the two worlds — reading a CSS variable into JS, mapping a URL segment
to a state property, or converting an HTML data-user-id attribute to a
JavaScript dataset.userId — you need to rename the identifier. Doing it by
hand for a dozen keys wastes time and invites typos; this converter handles a
whole list in a single paste.
How it works
The converter processes your input in three steps:
- Split on every run of non-alphanumeric characters. Hyphens, spaces, dots and other symbols all act as word separators, so even imperfect or mixed input divides correctly.
- Lowercase every word fragment.
- Join the fragments: the first word is left entirely lowercase, and every subsequent word has its first character capitalised.
If you paste multiple lines, each line is converted independently, so you can process a whole list of identifiers at once.
Conversion examples
| Kebab-case input | camelCase output | Typical source |
|---|---|---|
my-variable-name | myVariableName | Generic CSS class |
data-user-id | dataUserId | HTML data attribute |
background-color | backgroundColor | CSS property in JS |
api-base-url | apiBaseUrl | Config key |
gera-tools-privacy-first | geraToolsPrivacyFirst | URL slug to prop |
x-request-id | xRequestId | HTTP header to object key |
Practical tips
Multiple identifiers at once: Paste a list of hyphenated names, one per line. Each converts independently. This is useful when you have a set of CSS custom property names you want to mirror as JavaScript object keys.
Reversibility: camelCase is not uniquely reversible — dataUserId could have
come from data-user-id or dataUser-id. If you need round-trip fidelity, keep
a mapping file rather than relying on the converter in both directions.
PascalCase variant: If you need the first letter capitalised too
(MyVariableName), capitalise the first letter of the camelCase output manually.
This is the React component name convention and is not produced automatically.
Everything runs in your browser, so your code never leaves your machine.