HTML to JSX Converter

Conversion Rules

Common Use Cases

• Migrating static HTML templates into React components
• Copying HTML snippets from design tools (Figma, Webflow) into JSX files
• Learning the differences between HTML and JSX attribute naming
• Converting email HTML templates for use in React email libraries
• Quickly adapting third-party HTML widgets for React projects

Example

Input:

<label for="email" class="lbl">Email</label>
<input id="email" type="email" required>
<div style="background-image: url('a.png'); font-size:14px">x</div>
<!-- footer -->

Output:

<label htmlFor="email" className="lbl">Email</label>
<input id="email" type="email" required />
<div style={{ "backgroundImage": "url('a.png')", "fontSize": "14px" }}>x</div>
{/* footer */}

A login form shows several rules at once. The input

<form action="/login" method="post" novalidate>
  <label for="user" class="field-label">Username</label>
  <input id="user" name="user" autocomplete="username" maxlength="32" autofocus>
  <button type="submit" onclick="track(&quot;login&quot;)">Sign in</button>
</form>

becomes

<form action="/login" method="post" noValidate>
  <label htmlFor="user" className="field-label">Username</label>
  <input id="user" name="user" autoComplete="username" maxLength="32" autoFocus />
  <button type="submit" onClick={(event) => { track("login") }}>Sign in</button>
</form>

Six attribute names change (novalidate, for, class, autocomplete, maxlength and the boolean autofocus), the void <input> gets />, and the onclick string becomes an arrow function with " decoded back to ". Without the rename, React DOM prints a development warning such as “Invalid DOM property autocomplete. Did you mean autoComplete?”, so pasting unconverted HTML usually works but floods the console. The attribute names come from the same table React uses to suggest them (possibleStandardNames.js in react-dom).

data-* and aria-* attributes stay hyphenated, as React expects. Numeric attributes stay strings, such as colSpan="2"; React accepts them.

What You Still Change by Hand

Limits

• Attribute values are copied as written. Only attribute names change, so href="/search?for=1&class=2" stays the same. This is what the htmltojsx converter does too. Two values change: style becomes an object, and the code of an event handler goes into (event) => { ... }, because React needs a function, not a string. Entities such as " in that code are decoded. An on* attribute that is not a DOM event, such as onfoo on a custom element, is kept as written.
• Text keeps its characters. In text between tags, {, }, < and > are written as {, }, < and >, which JSX turns back into the same characters, so <p>{name}</p> renders the text {name} instead of reading a variable. Other text is copied as is, and a full document keeps its <!DOCTYPE>, <html>, <head>, and <body>. Paste only the part that goes into the component.
• Styles that cannot be kept are refused. !important, a property written twice (color:red;color:blue, often a CSS fallback), CSS comments, escaped property names and unclosed quotes or brackets stop the conversion. The output is cleared, Copy is disabled and the status line names the character position in the style, for example “Cannot convert style at position 11: !important cannot be preserved in a React style object”. Other values, including url(data:…;base64,…) and custom properties like --accent, are copied character for character as JSON strings.
• No component wrapper. The output is markup. Put it in the return (...) of your component.
• No HTML parsing or repair. The converter rewrites opening tags it can match with a pattern; it does not build a DOM. Unclosed tags stay unclosed, and an attribute written twice (class="a" CLASS="b") becomes two className props, which JSX does not allow. Paste markup that already validates.
• Comments. A */ inside an HTML comment is written as * /, so the JSX comment does not end early.