Paste HTML and get JSX React accepts: className, style objects, closed tags, camelCase
Runs in your browser. Nothing you type is sent anywhere. Checked against sources on 22 Oct 2026.JSX looks like HTML with about 5 rules changed: class becomes className, for becomes htmlFor, style becomes an object such as style={{ fontSize: '12px' }}, every tag must be closed (<br />), and attributes are camelCase, such as tabIndex and strokeWidth. Paste HTML here and all of it is done for you.
Paste the HTML, or open an .html or .svg file; nothing is uploaded.
Read the JSX on the right: className, htmlFor, style objects and closed tags are already done.
Type a component name to wrap it in a function, and tick Pass props for an icon component.
Read the notes under the result, such as removed onclick handlers, then copy.
Copying a snippet from a template, a design tool or an old page into a React component usually ends in a screen of warnings. This converter rewrites the markup into JSX that compiles and renders the same thing.
What changes.
| HTML | JSX |
|---|---|
| class="card" | className="card" |
| for="email" | htmlFor="email" |
| style="font-size: 12px" | style={{ fontSize: '12px' }} |
, <img ...> |
, <img ... /> |
| tabindex, maxlength, srcset | tabIndex, maxLength, srcSet |
| stroke-width, xlink:href | strokeWidth, xlinkHref |
| {/* note */} | |
| { and } in text | {'{'} and {'}'} |
Forms stay editable. A value or checked attribute in JSX locks a field unless you add an onChange handler. The converter writes defaultValue and defaultChecked instead, moves selected options to the select's defaultValue and turns textarea content into defaultValue, so fields work straight away. Turn this off if you will wire up state yourself.
Markup is read like a browser reads it. Missing end tags for li, p, td and option are closed where the HTML Standard says they end, rows placed directly in a table get a tbody, and white space between inline elements on different lines is kept as {' '} so words do not run together.
SVG. Attributes and tags get the case React expects, such as viewBox and linearGradient, the XML header and editor data from Inkscape or Illustrator are removed, and Pass props makes an icon component you can size from outside.
Notes. Inline handlers such as onclick are removed and listed, since JSX needs a function, not a string. Every example in the tests is compiled by TypeScript and rendered by React 19 with no warnings. Nothing is uploaded. Related tools: HTML Formatter, SVG Optimizer, JSON to TypeScript.
JSX compiles to JavaScript, where class is a reserved word, so React uses the DOM property name className instead. The same applies to for, which becomes htmlFor. Paste your markup above and every class and for attribute is renamed, along with tabindex, maxlength and the other camelCase names.
Each CSS declaration becomes a key and a string value inside double braces, with hyphenated names in camelCase: style="font-size: 12px" becomes style={{ fontSize: '12px' }}. Vendor prefixes start with a capital, such as WebkitTransition, and custom properties such as --gap keep their quoted name.
Yes. Open the .svg file or paste its code, type a component name and tick Pass props. The result is a function component with {...props} on the svg element, so width, height, className and colour can be set wherever it is used. Attribute names are converted to the case React expects.
Handlers written as strings, such as onclick="save()", cannot work in JSX, which needs a function. The converter removes them and lists each one under the result, so you can add onClick={save} or the right handler yourself without a silent bug.
In React, a field with value but no onChange handler is read-only: typing does nothing. The defaultValue and defaultChecked props set the starting value and leave the field editable, which matches how the HTML behaved. Turn off Uncontrolled forms to keep value and checked for state you manage yourself.
No. The conversion runs in your browser as you type, and nothing you paste or open is uploaded or stored. Markup is read by a small parser in the page, so even a large template converts in a moment and works offline once the page has loaded.
Rates and rules change; check the source before you rely on a figure.
Still stuck? Ask about HTML to JSX Converter and anybody who knows can answer. No account needed.
On the related tools: TSV to JSON – Convert tab-separated values, such as a paste from Excel, into JSON · Query String Parser – Split a URL query string into a table of decoded parameters.