CSS to JSX Style Converter

How to use

1. 1Pick a direction at the top: CSS to JSX object, or JSX object to CSS. The sample is loaded by default so you can see the conversion immediately.
2. 2Paste your CSS declarations or your JSX style object into the input panel. The output regenerates automatically as you type.
3. 3In CSS to JSX mode, choose double or single quotes and 2 / 4 / tab indent to match your codebase. Click Copy as style prop to copy the full style={{ ... }} attribute.
4. 4Check the warnings panel for any property the converter skipped, such as spreads, computed keys, or values that need a runtime to resolve.
5. 5Use Swap to feed the current output back as the next input, Load sample to restore the example, or Clear to start fresh.

About this tool

CSS to JSX Style Converter rewrites a list of CSS declarations into the React style object shape that JSX style={{ ... }} props expect, and it can also do the reverse and turn a React style object back into plain CSS. The CSS parser splits on top-level semicolons while ignoring those inside url(), var(), rgb(), and quoted strings, so multi-value shorthand like padding: 12px 20px and background: url("a;b.png") center / cover no-repeat round-trip cleanly. CSS property names are lowercased and camelCased for the JSX side, with the standard rules for vendor prefixes (-webkit-, -moz-, and -o- capitalize the leading letter; -ms- is the documented React exception and keeps the lowercase m), and CSS custom properties such as --accent stay verbatim as bracketed string keys so the variable name survives intact. The reverse direction camelCase-to-kebab handles every prefix the same way, and any numeric value in a JSX object that targets a length-bearing property automatically gets px appended on the way to CSS, while numbers for unitless React properties (zIndex, opacity, lineHeight, fontWeight, flex, order, columnCount, the grid line shorthands, and the SVG opacity, miterlimit, and stroke length properties) stay bare. The !important flag is preserved on both sides. The parser reports clear, line-aware warnings for anything it cannot safely round-trip, including spread elements, computed keys, template literals, identifier references such as theme.primary, and stray comments, so the output stays deterministic instead of guessing. Indent size and quote style are configurable, a one-click Copy as style prop button wraps the result in style={{ ... }}, and the swap button uses the current output as the next input for back-and-forth refactoring. Everything runs locally in your browser, so the styles you paste here are never uploaded. Useful for porting design system snippets into React, converting CSS-in-JS code between libraries, cleaning up exports from no-code builders, refactoring inline styles to CSS Modules or back, and turning copied Computed style panes into ready-to-paste JSX.

Free to use. Works in your browser. No signup, no login.