Runs 100% in your browser — nothing is uploaded
Formatters & Minifiers

HTML → JSX Converter

Convert HTML markup to React JSX — className, camelCase attributes, self-closed void tags, and inline style objects.

HTML → JSX Converter
Client-side

About this tool

The HTML to JSX Converter transforms raw HTML into React-ready JSX by applying the attribute and syntax differences JSX requires: class becomes className, for becomes htmlFor, event handler attributes like onclick become onClick, and self-closing void elements (br, img, input, hr, meta, link, area, base, col, embed, source, track, wbr) get their required trailing slash.

Inline style attributes are converted from CSS text into a JSX style object — style="color:red; font-size:12px" becomes style={{ color: 'red', fontSize: '12px' }}, with CSS properties converted to camelCase. HTML comments are converted to JSX comment syntax. Attribute names that differ between HTML and the DOM property JSX expects — tabindex, readonly, maxlength, colspan, rowspan, autofocus, autocomplete — are all remapped automatically.

This is a pure string-transformation tool: no HTML is rendered or executed, so it's safe to paste markup copied from any source. An optional toggle wraps the converted output in a complete function-component scaffold, ready to drop into a new .jsx or .tsx file. If your input contains a <script> tag, a non-blocking warning is shown — script tags need manual review since raw script content and event wiring don't map cleanly onto React's component model. Common uses: porting a static HTML template into a React component, converting a designer's HTML mockup, or migrating a legacy jQuery page fragment.

FAQ

Does this parse HTML with a real DOM parser?
No — the conversion uses targeted string/regex transforms rather than DOMParser. This keeps the tool fast, dependency-free, and consistent whether run in a browser tab or a build script.
Why does my style attribute need to become an object?
JSX does not accept a CSS string for the style prop — React requires a JavaScript object with camelCased property names and string (or number) values. This is different from plain HTML/DOM style attributes.
What happens to script tags in my HTML?
The converter still processes the surrounding markup, but flags a non-blocking warning because inline scripts don't translate to React idioms automatically.
Are all HTML attributes converted, or just the common ones?
The tool handles the attributes that differ between HTML and JSX: class, for, standard event handler attributes, and casing-sensitive DOM properties like tabindex, readonly, maxlength, colspan, rowspan, autofocus, and autocomplete.
Does the "Wrap in function component" option change my markup?
No — it only adds a surrounding function-component scaffold around your already-converted JSX, so you can paste the result directly into a new component file.