HTML to JSX
Convert HTML to JSX, rewriting attributes and inline styles
What is HTML to JSX?
This HTML to JSX converter rewrites HTML fragments into JSX that React will accept: class becomes className, for becomes htmlFor, inline style strings become objects, and void elements are given a self-closing slash. Everything runs locally in your browser.
How to use HTML to JSX
- 1Paste an HTML fragment. There is no need to include html or body wrapper tags.
- 2Review the JSX, which can be pasted directly into a component return statement.
- 3Check event attributes by hand: onclick and friends must become React handlers such as onClick bound to a function.
Common errors and how to fix them
| Symptom | Cause | Fix |
|---|---|---|
| React logs "Warning: Invalid DOM property" | A hyphenated attribute was not mapped to its React camelCase equivalent. | The tool covers the common attributes. Rewrite anything left over against the React DOM attribute reference; data-* and aria-* attributes are correct as they are. |
Frequently asked questions
Are inline event attributes converted?+
No. The string inside onclick="doSomething()" is HTML event syntax, whereas React expects a function reference. The attribute is left in place so you can see that it exists, but you have to rewrite it yourself as onClick={handler}.
Why does style have to become an object?+
React expects style to be an object rather than a string: property names are camelCased and numeric properties can omit the unit. The tool converts kebab-case names to camelCase for you and leaves plain numeric values unquoted.
Related tools
All toolsJSON to YAML Converter
Convert JSON to YAML while preserving the nesting
YAML to JSON Converter
Convert YAML to JSON, multi-document files included
JSON to CSV Converter
Convert a JSON array of objects to CSV, with nested fields flattened automatically
CSV to JSON Converter
Convert CSV to JSON with automatic header and delimiter handling
JSON to TypeScript
Infer TypeScript type definitions from JSON
JSON to Go Struct
Convert JSON to Go structs with json tags filled in