Convert HTML to JSX (React)

How it works

Moving ready HTML into a React project means changing every class to className and every for to htmlFor, and turning style strings into objects; miss one and the console fills with warnings. Paste the HTML into the left pane and the JSX appears on the right. For example <p style="color: #7a3; font-size: 14px"> becomes <p style={{ color: '#7a3', fontSize: '14px' }}>, and <br> closes itself as <br />. Hyphenated names such as stroke-width in SVG become strokeWidth; names starting with data- or aria- stay hyphenated because React expects them that way. Event attributes like onclick become onClick and their code is wrapped in a function. The result line tells you how many tags were processed and how many attribute names changed.

This tool is also known as html to jsx, html to jsx converter, html to react, convert html to jsx online, html to react component.

What is JSX?

JSX is a JavaScript extension that lets React components describe their interface in a syntax that looks like HTML. Browsers cannot read JSX directly; Babel or the TypeScript compiler turns it into React.createElement calls. It looks like HTML but follows JavaScript rules: attribute names use DOM property names, every tag must be closed and curly braces start an expression.

What is className and htmlFor?

class and for are reserved words in JavaScript: one declares a class, the other starts a loop. Because JSX is JavaScript, React asks for these two attributes by their DOM property names, className and htmlFor. If class is left in pasted code, React 17 and later warn and still apply it, but older versions and some tools silently drop the class.

What is the difference between HTML and JSX?

HTML is a markup language that browsers read forgivingly: they close missing tags and ignore letter case in attribute names. JSX is syntax written inside JavaScript and goes through a compiler: every tag must close, attribute names are camelCase, style is an object rather than a string, and JavaScript runs inside curly braces. The two look alike, but JSX plays by JavaScript's rules.

Which conversions are applied?

The list below collects the rules the tool applies. They follow React's DOM attribute names; any attribute not listed is copied as it is.

• class → className, for → htmlFor
• Names such as tabindex, readonly, maxlength, colspan in camelCase: tabIndex, readOnly
• style="a-b: c" → style={{ aB: 'c' }}; a -webkit- property becomes WebkitX
• Void tags such as br, img, input, hr and empty elements close themselves
• Comments become {/* … */}; the doctype is dropped
• { } and > in text break JSX, so they are escaped
• Spaces and line breaks inside pre are kept as strings

Form fields and events

In React, an input with a value attribute becomes read-only: nobody can type in it and the console shows a warning. So the tool turns value into defaultValue and checked into defaultChecked on input and select, and the text inside a textarea becomes its defaultValue. If you plan to control the field with state, switch these back to value plus onChange.

In HTML, onclick="send()" is a string; React wants a function. The tool wraps the code in an arrow function: onClick={(event) => { send(); }}. Inside it, this no longer points to the element; if your code uses this, replace it with event.currentTarget.

Frequently asked questions

Why does the output sometimes start with <>?

A React component has to return a single root element. When you choose component output and your HTML has more than one top-level element, the tool wraps them in <> … </>, a React Fragment. A Fragment adds no extra tag to the page.

Why did { } in my text become {'{'}?

In JSX a curly brace starts a JavaScript expression, so a plain brace in text is a compile error. The tool writes it as a string and the page still shows { and }. For the same reason > becomes &gt;.

Can I use the result in a TypeScript (TSX) file?

Yes. The generated JSX is valid in a TSX file too. You may need to add a type to the event parameter in event handlers, depending on your tsconfig settings.

Is my code uploaded anywhere?

No. The HTML parser and the JSX writer run in your browser; the code you paste stays on this page.