About the HTML to JSX Converter
React does not accept HTML exactly as it is written for web pages. Attributes such as class and for have different names, styles must be objects, void tags like img and br must close themselves, and comments look different. This converter fixes all of that when you paste markup from a template, a design tool or an old site. It renames attributes (class to className, tabindex to tabIndex, stroke-width to strokeWidth), turns style strings into objects, self-closes void elements, converts comments, escapes curly braces in text and can wrap the result in a function component. Notes tell you about things that need your attention, such as inline event handlers. Everything runs in your browser.
Updated October 2026
How to use the HTML to JSX Converter
- 1Paste your HTML on the left.
- 2Choose whether to wrap the result in a React component and set its name.
- 3Read the JSX on the right.
- 4Check the notes under the result for event handlers or scripts.
- 5Copy the code into your component file.
What changes in JSX
JSX needs one parent element, so several siblings are wrapped in a fragment, written as an empty pair of angle brackets. Every element must close, so <br> becomes <br /> and <img> becomes <img />. Attribute names use camelCase, and a few have different words: class is className, for is htmlFor and tabindex is tabIndex.
Inline styles change the most. Instead of a string with semicolons, React wants an object whose keys are camelCase CSS properties. The converter splits the string, converts each property name and quotes each value.
The converter works on the text, not by running your page, so it will not fix logic. A form that relied on a script, a table built with the old border attribute or a marquee tag will convert to valid JSX but still need work. Treat the output as a head start for a component, then connect state, props and events in the usual React way.
Things to check by hand
- Event handlers, which are replaced by empty functions.
- Inputs: decide whether they should be controlled with state.
- Images and links with relative paths that need importing.
- Inline script and style tags.
- Custom attributes: data- and aria- attributes keep their dashes, which is correct.
Related tools
To learn from the other template side, try the HTML to Pug Converter or the HTML Viewer to see how markup looks. Before converting, tidy it with the Code Beautifier, and check or build tables with the HTML Table Generator. For text clean-up use the HTML Encoder & Decoder.
Features
- class to className and for to htmlFor
- Style strings to style objects
- Self-closing img, br, input and other void tags
- SVG attributes like stroke-width to strokeWidth
- HTML comments to JSX comments
- Curly braces in text escaped
- Optional component wrapper with a fragment when needed
Frequently asked questions
Why can't I paste HTML straight into React?
JSX looks like HTML but is JavaScript. Reserved words such as class and for clash with JavaScript, attributes are camelCase, and every tag must be closed.
What happens to inline styles?
A style string like background-color: red becomes an object: style={{ backgroundColor: "red" }}. Numbers stay as text with units where needed.
What about onclick and similar attributes?
React needs a function, not a string. The tool renames the attribute (onClick) and puts an empty function in its place, with a note, so you can write the handler.
Does it handle SVG?
Yes. Attributes with dashes are turned into camelCase, such as stroke-linecap to strokeLinecap, and tags are closed.
Why is my value attribute now defaultValue?
In React, a value attribute makes a field controlled and read-only without an onChange handler. defaultValue keeps the field editable.
Will script tags work?
No. React does not run scripts inside rendered markup. Move the code into useEffect or load it separately.
Is my HTML uploaded?
No, the conversion runs entirely in your browser.