All tools

HTML to JSX Converter

Code

Convert HTML to React JSX: className, htmlFor, style objects, self-closing tags, JSX comments, and optional component wrapping.

Loading tool…
Was this tool helpful?
htmljsxreactconvertsvgnextjs

About HTML to JSX Converter

Paste markup from a template, a design handoff or an old static page and get JSX you can drop straight into a React or Next.js component. Besides the usual class to className and for to htmlFor, it turns inline style strings into style objects (including vendor prefixes and CSS variables), camelCases SVG attributes like stroke-width, self-closes void elements, rewrites comments as {/* */}, escapes stray braces, and switches input value and checked to their uncontrolled defaultValue and defaultChecked forms. It also repairs tags HTML lets you leave open, like <li> and <td>, and lists anything that still needs a manual look, such as inline onclick code or a script tag that React won't run. The same converter is available from the REST API, both SDKs and the MCP server, so you can run it in a codemod or ask your editor's assistant to convert a snippet.

How to use HTML to JSX Converter

  • 1.Paste HTML into the left pane, drop an .html or .svg file onto it, or pick one of the examples.
  • 2.Tick "Wrap in a function component" and enter a PascalCase name if you want a ready-to-paste component instead of bare JSX.
  • 3.Copy or download the JSX, then read the warnings below it: they point at the parts the converter could not translate safely, such as inline event handler code.

Frequently asked questions

What does it change besides class and for?
It renames about 60 attributes React spells differently (tabindex, readonly, maxlength, colspan, srcset, crossorigin and so on), camelCases hyphenated and namespaced SVG attributes, converts style strings to objects, self-closes void elements, escapes { } and > in text, and turns comments into JSX comments. data- and aria- attributes are kept as they are.
What happens to onclick and other inline handlers?
The handler code is wrapped in an arrow function, so onclick="save()" becomes onClick={() => { save() }}. That compiles, but code that relies on this or event will need a manual rewrite, which is why the tool shows a warning.
Does it produce TypeScript or check that my JSX type-checks?
The output is plain JSX that also parses as TSX. It converts numeric attributes like tabIndex and rowSpan to numbers so React's types accept them, but it does not add prop types or check that referenced functions exist.
Is my HTML uploaded anywhere?
No. In the browser the conversion runs locally on your device. The REST API runs the same code on Utilix's server and records only that the tool was called, not what you sent.

Use via API, SDK, or MCP

cURL# Free: 1,000 req/day · Pro: 10,000 req/day
curl -X POST https://api.utilix.tech/v1/tools/html-to-jsx \
  -H "Authorization: Bearer utx_live_..." \
  -H "Content-Type: application/json" \
  -d '{"html":"<div class=\"card\" style=\"padding: 8px; font-size: 14px\"><label for=\"email\">Email</label><input id=\"email\" value=\"a@b.co\"><br></div>","componentName":"Card"}'

Get an API key from your dashboard · Full API docs →

Related tools

SVG to React ComponentConvert SVG to a React component (JSX or TSX) with camelCased attributes, a props spread, editor cleanup, 1em sizing and currentColor.CodeHTML to MarkdownConvert HTML to Markdown and Markdown back to HTMLTextARIA Role & Attribute ValidatorCheck every role and aria-* attribute in a pasted HTML snippet against a curated WAI-ARIA 1.2 role table: unknown roles, attributes not permitted on a given role, and widget roles missing a required aria-* stateCode