HTML to JSX Converter🔒 100% local
Convert HTML to JSX syntax. Handles class->className, for->htmlFor, event handlers, and style objects.
Related Tools
Rewrites an HTML fragment into the shape React wants to see: class becomes className, for becomes htmlFor, tabindex becomes tabIndex, lower-case event attributes such as onclick are camel-cased, a style="..." string is turned into a {{...}} object, boolean attributes lose their ="true", and a tag already written with /> gains a space before the slash. Fragments are transformed by a pipeline of regular expressions in this tab, so there is no upload to a conversion service and no build step involved.
How to use it
- Paste an HTML fragment; the box starts with <div class="container"><span id="hello">Hello World</span></div>.
- Press Convert to JSX.
- Copy the JSX Output into your component, then fix the parts a regex cannot handle.
Worked example
<div class="container"><span id="hello">Hello World</span></div>becomes<div className="container"><span id="hello">Hello World</span></div>Only the class attribute changed - id and the element structure were already valid JSX.
<a href="/x" style="color: red; font-size: 12px" onclick="go()">Hi</a>becomes<a href="/x" style={{color: 'red', fontSize: '12px'}} onClick="go()">Hi</a>The style string became a camel-cased object and onclick became onClick, but the value is still the string "go()" - React will not call that.
<input type="text" disabled="true" readonly>becomes<input type="text" disabled readonly>The boolean-attribute rule drops ="true" and leaves the bare attribute name.
When to use it
- Moving a static marketing fragment or an old template partial into a React component.
- Converting a snippet copied from the browser's element inspector into something a .tsx file will accept.
- Turning a long inline style attribute into a JSX object before you edit the values by hand.
What it does not do
- It substitutes text rather than parsing it, so multi-line attributes, nested quotes and malformed markup can come out wrong.
- Handlers are renamed but never converted: onClick="doThing()" is not a function reference and will be ignored at runtime.
- The style pass splits on : and ;, so a CSS value containing either character can be broken across keys.
- Context is ignored: class is replaced even inside text or an attribute name, so data-class comes out as data-className.
- A void element written without the self-closing slash, such as <br>, is left alone, and HTML comments are removed rather than converted.