Micro Tools
Advertisement

HTML to JSX

Convert HTML to React JSX for free. Paste markup and get valid JSX with className, htmlFor, camelCase props and style objects. Runs in your browser.

HTML input

Paste HTML markup, then press Convert.

JSX output

Waiting for HTML input.

Private by design: conversion runs entirely in your browser, so your markup never leaves your device.
Advertisement

What changes in the conversion

JSX looks like HTML but follows JavaScript rules: class becomes className, for becomes htmlFor, inline styles become objects, and event props use camelCase like onClick. Comments and boolean attributes are rewritten too.

The tool also self-closes void elements (img, br, input) and escapes curly braces in text so your markup does not accidentally become expressions.

Limits to know

Pasted event handlers like onclick cannot be converted to real functions, so they become onClick placeholders you wire up yourself. Custom elements and web components pass through with their attributes camelCased.

Always give the output a quick read: complex nested templates sometimes need small manual fixes, especially around whitespace and conditional markup.

Related tools

JSON formatterFormat and validate JSON, privately. Regex testerTest regex live with highlighting. Base64 encoderBase64 encode and decode, plus URL encoder and JWT decoder.

HTML to JSX FAQs

Why does class become className?
Because class is a reserved word in JavaScript, React uses className for the CSS class attribute. The same reason turns for into htmlFor.
How are inline styles converted?
A style string like color: red becomes a style object {{color: 'red'}} with hyphenated properties camelCased, which is what React expects.
What happens to my onclick handlers?
They become onClick={/* handler */} placeholders. You need to attach your real function, since pasted HTML cannot carry JavaScript functions safely.
Does it handle SVG?
Basic SVG converts, with attributes camelCased. Some SVG attributes with special React names may still need a manual check.
Is my markup uploaded anywhere?
No. Conversion runs entirely in your browser.
Advertisement