HTML to JSX Converter
Convert HTML to valid React JSX: className, style objects, self-closing tags.
About this tool
Paste HTML, such as a snippet from a template, a design export or a page you're migrating, and valid JSX appears as you type. Optionally wrap it in a named function component, and choose whether form values become defaultValue. Copy the result straight into a React, Next.js or Preact file.
What changes between HTML and JSX
JSX looks like HTML but is really JavaScript, so a few rules differ, and pasting raw HTML into a component usually breaks. class and for are reserved words in JavaScript, so they become className and htmlFor. Multi-word attributes are camelCase: tabindex becomes tabIndex, maxlength becomes maxLength, and SVG's stroke-width becomes strokeWidth. The data- and aria- attributes stay as they are. Inline styles are objects, not strings, so style="background-color: #fff" becomes style={{ backgroundColor: "#fff" }}. Every tag must be closed, so <br> and <input> become <br /> and <input />. Curly braces start JavaScript expressions, so literal braces in text are escaped. HTML comments become {/* … */}, and a component can only return one root, so several top-level elements are wrapped in a fragment. Uncontrolled form fields use defaultValue and defaultChecked, which avoids React's "value without onChange" warning. Honest limits: inline onclick code can't be translated safely, so it becomes an empty handler with the original code in a comment. <script> tags are removed, and broken HTML is repaired the way a browser would repair it. The SVG to JSX converter, the HTML formatter and the HTML to Markdown converter are related.
Frequently asked questions
Why does React use className instead of class?
JSX compiles to JavaScript, where class is a reserved word, so React uses the DOM property name className instead.
How do inline styles work in JSX?
As an object with camelCase keys: style={{ fontSize: "12px", backgroundColor: "#fff" }}. The converter rewrites style strings for you.
What happens to onclick attributes?
They become onClick handlers with the original code kept in a comment. Move that code into a function in your component.
Is my HTML uploaded?
No. Conversion runs in your browser and nothing is stored or sent.