Kebab-Case to CamelCase Converter (Live CSS & React Code Formatter)
Convert hyphenated kebab-case strings into clean JavaScript/TypeScript camelCase or PascalCase. Convert CSS stylesheets into React JSX inline style objects and format HTML5 data-* attributes in real time.
Why Frontend Frameworks Disallow Kebab-Case
In standard CSS, hyphenated kebab-case is the default syntax (e.g., background-color, font-family). However, in JavaScript and TypeScript, the hyphen (-) is reserved as the arithmetic minus operator.
Writing style={{ background-color: '#fff' }} in React or Vue triggers a fatal syntax error: JavaScript attempts to subtract color from background. To solve this, all modern frontend libraries convert hyphenated CSS attributes into camelCase properties (e.g., backgroundColor).
CSS to React / JSX Style Property Matrix
| CSS Property (kebab-case) | React / JSX Style (camelCase) | JSX Syntax Example | Component Use Case |
|---|---|---|---|
| background-color | backgroundColor | backgroundColor: '#0f172a' | Inline background styling. |
| font-size | fontSize | fontSize: '1.25rem' | Dynamic typography scales. |
| z-index | zIndex | zIndex: 100 | Modal and layer stacking. |
| border-top-left-radius | borderTopLeftRadius | borderTopLeftRadius: '8px' | Multi-word corner radii. |
| box-shadow | boxShadow | boxShadow: '0 4px 6px #000' | Custom card shadows. |
The HTML5 `dataset` API Conversion Rules
When querying HTML5 custom data attributes in vanilla JavaScript, the browser engine automatically transforms kebab-case attributes into camelCase object keys on the DOMStringMap:
<!-- HTML Markup -->
<div id="user-node" data-user-id="48291" data-is-admin-account="true"></div>
// JavaScript Access via element.dataset:
const node = document.getElementById('user-node');
console.log(node.dataset.userId); // "48291"
console.log(node.dataset.isAdminAccount); // "true"
Related Developer Case Converters:
- CamelCase to Snake_Case Converter — Format JavaScript code into Python/SQL variables.
- Snake_Case to CamelCase Converter — Convert SQL database columns into TypeScript properties.
- SEO URL Slug Generator — Convert article titles into clean kebab-case permalinks.
- Universal Case Converter — UPPERCASE, lowercase, Title Case, and Sentence case.
Frequently Asked Questions
How does this tool convert CSS stylesheets into React style objects?
When the "Format CSS as React JSX Style Object" option is enabled, the tool identifies property-value pairs separated by colons, converts the property name to camelCase, wraps the string values in quotes, and wraps the block in an executable JavaScript object literal { }.
What is the difference between kebab-case and camelCase?
Kebab-case uses all-lowercase letters separated by hyphens (e.g., font-size), commonly used in CSS and URLs. CamelCase removes hyphens and capitalizes the first letter of each subsequent word (e.g., fontSize), standard in JavaScript and TypeScript.
Can I convert web component tags into React components?
Yes. By enabling the PascalCase checkbox, custom HTML elements like user-profile-card convert directly into standard React component names like UserProfileCard.