Developer / React

HTML to JSX Converter

Convert HTML into JSX for React: class to className, inline styles to objects, closed void elements, escaped braces, and comments, optionally wrapped in a component.

HTML to JSX Converter: The HTML is parsed into elements, so attributes are renamed for React (class, for, tabindex, readonly, maxlength, and others), styles become objects with camelCase keys, and void elements such as <br> and <img> are closed. Braces and angle brackets in text are escaped, comments become {/* */}, and form values become defaultValue and defaultChecked so the fields stay editable. The output of the test pages compiles as TSX. Runs 100% locally in your browser with zero server file uploads.

Category
Developer tools
Runs
In your browser
Cost
Free · no sign-up
Availability
Ready to use
HTML to JSXLocal processing

Runs entirely in your browser

  • Removed onclick="send()" on <button>: write it as a function, such as onClick={() => …}.

JSX

<div className="card" style={{ marginTop: "8px", backgroundColor: "#fff" }}>
  <label htmlFor="email">Email</label>
  <input id="email" type="email" placeholder="you@example.com" required />
  <button tabIndex="0">Send</button>
  {/* footer */}
  <p>Price: {"{"}price{"}"} &gt; 0</p>
</div>

Attributes are renamed for React (class to className, for to htmlFor, tabindex to tabIndex), styles become objects, empty and void elements are closed, comments become {/* */}, and form values become defaultValue so the fields stay editable.

After converting

Turn repeated markup into components that take props, replace the hard-coded text with variables in braces, and move inline styles into CSS classes or your styling system, since style objects are rebuilt on every render.

For SVG icons, SVG to JSX makes a component that passes props through; to strip comments and extra whitespace first, use the HTML minifier.

Differences that trip people up

JSX needs one root element, so several are wrapped in a fragment (<>…</>). Every element must be closed, attribute names are camelCase, and text containing { or } must be written as {"{"}, which the converter does for you.

How to use it

  1. Paste HTML, from a single element to a whole section of a page.
  2. Optionally wrap the result in a named component.
  3. Copy the JSX, and rewrite any inline event handlers listed in the warnings.

Privacy & limitations

The HTML is converted in your browser and never uploaded.

Related tools

SVG to JSXHTML MinifierHTML Encoder

Frequently asked questions

Why are onclick attributes removed?

In HTML they are strings of code; in React they must be functions. The converter lists each one so you can rewrite it, for example onclick="save()" as onClick={save}.

Why does value become defaultValue?

A value attribute in React makes the field controlled, so it cannot be typed into without an onChange handler; defaultValue sets the starting text and leaves it editable.

Does it handle SVG?

Yes: SVG attributes such as stroke-width become strokeWidth. For a whole SVG file turned into a component, the SVG to JSX tool adds props.

Free tool · runs in your browser · no account required