Free tool - no signup
CSS to React style object
Paste a rule or a declaration list, get a typed React.CSSProperties object. Vendor prefixes, custom properties and the unitless-number rule are handled, because those are the three that fail silently.
Typing the data that fills the component instead of the styles around it? The JSON to TypeScript generator takes an API response, and TypeScript to Zod turns the interfaces it gives you into a runtime check.
Frequently asked questions
Why not just retype the CSS by hand?
Because React drops a style property it does not recognise, and it does it in silence. Write fontSize as font-size in a style object and there is no console warning, no build error without React.CSSProperties in place, and nothing on screen except text at the wrong size. The conversion is mechanical and the failure is invisible, which is the worst combination to leave to a person doing it at speed.
What happens to vendor prefixes?
A prefixed property capitalises its first letter, so -webkit-line-clamp becomes WebkitLineClamp and -moz-osx-font-smoothing becomes MozOsxFontSmoothing. The -ms- prefix is React documented exception and stays lowercase as msFlex. The tool also knows that a prefix does not change whether a property takes a unit, so -webkit-line-clamp: 3 comes out as the number 3 rather than the string.
When does a value stay a number?
Only when the property is one React leaves unitless: line-height, z-index, opacity, flex-grow, font-weight, grid-row and the rest of that list. Everywhere else React appends px to a bare number, so 10 on width would silently become 10px. Any value carrying a unit stays a string regardless, which is why line-height: 1.5 is a number and line-height: 1.5rem is not.
Does it handle custom properties?
Yes, and it deliberately does not camelCase them. A CSS custom property keeps its dashes, so --brand-color stays as a quoted "--brand-color" key. Turning it into brandColor is the single most common mistake here, and React discards the result without complaint, so the variable simply never gets set.
Is my CSS sent anywhere?
No. It is client-side JavaScript, running in your browser. Nothing is uploaded, nothing is stored, there is no sign-up and no network call. The page keeps working with the network disconnected.