HTML to JSX

Convert HTML snippets into valid React JSX.

0 chars
0 words
0 lines
0 chars
0 words
0 lines

HTML to JSX Converter

The HTML to JSX converter turns ordinary HTML into valid JSX that you can paste into a React, Next.js, Preact, or Remix component. Copying a snippet from a template, a design system, or an old page usually fails to compile in React because of small syntax differences. This tool fixes them all in one step.

What gets converted

  • Reserved attribute names – class → className, for → htmlFor.
  • camelCase attributes – tabindex, maxlength, readonly, colspan, autocomplete, srcset, crossorigin, and many SVG attributes such as stroke-width and viewbox.
  • Inline styles – CSS strings become JavaScript objects with camelCase keys: style={{ backgroundColor: '#d10505' }}. Custom properties like --gap are quoted.
  • Void elements – <input>, <img>, and <br> are self-closed (<br />).
  • Comments – <!-- note --> becomes {/* note */}.
  • Event handlers – onclick becomes onClick with an arrow function.
  • Uncontrolled inputs – value and checked on inputs become defaultValue and defaultChecked.
  • Curly braces in text are escaped so JSX does not treat them as expressions.

Multiple root elements are wrapped in a Fragment (<>…</>). Enter a component name and the output becomes a complete export default function component; leave it empty for bare JSX.

After converting

The converter produces syntactically valid JSX, but event handlers still contain the original inline code. Replace them with component functions, and consider moving inline styles to CSS modules or your styling library. Accessibility attributes (aria-*) and data-* attributes are kept as-is, because React accepts them in their dashed form.

Format the result with the JavaScript Beautifier, clean the source first with the HTML Cleaner, or output PHP instead with HTML to PHP.

Frequently Asked Questions

JSX compiles to JavaScript, where class and for are reserved words. React therefore uses className and htmlFor; this tool renames them, along with camelCase attributes like tabIndex, maxLength, and readOnly.

React expects style to be an object. A string like "font-size: 12px; z-index: 2" becomes style={{ fontSize: '12px', zIndex: 2 }}, with property names in camelCase and pure numbers kept as numbers.

They are renamed to camelCase (onClick) and wrapped in an arrow function containing the original code. Review them, because React handlers usually call component functions instead of global ones.

In React a value prop without onChange makes the input read-only. Using defaultValue and defaultChecked keeps the field editable, like in plain HTML.