HTML to JSX

Convert HTML to React JSX syntax

HTML Input

JSX Output

How to use HTML to JSX

  1. •Paste your HTML into the input panel. This can be a snippet from a template, a component from a design tool's export, or any valid HTML.
  2. •Review the JSX output in the output panel. The tool automatically applies all necessary transformations.
  3. •Verify the changes — key transformations include class to className, for to htmlFor, inline style strings to JavaScript objects, and self-closing void elements like <img> and <br>.
  4. •Copy the JSX and paste it into your React component.

What is JSX and how does it differ from HTML?

JSX (JavaScript XML) is a syntax extension for JavaScript used by React to describe UI structure. It looks like HTML, but it is actually syntactic sugar for React.createElement() calls. Because JSX is embedded in JavaScript, it must follow JavaScript's rules, which creates several differences from standard HTML.

The most common difference is attribute naming. HTML attributes that collide with JavaScript reserved words are renamed: class becomes className (because class is a reserved word in JavaScript), and for becomes htmlFor (because for is a loop keyword). Event handler attributes are camelCased: onclick becomes onClick, onchange becomes onChange.

Inline styles work differently. In HTML, styles are strings: style="color: red; font-size: 16px". In JSX, styles are JavaScript objects with camelCased property names: style={{ color: "red", fontSize: "16px" }}. Numeric values do not need units — React assumes pixels for most properties.

Self-closing elements are required for void elements. In HTML, <img src="..."> and <br> are valid. In JSX, they must be self-closed: <img src="..." /> and <br />. Forgetting the slash causes a parse error.

Boolean attributes also differ. HTML allows <input disabled> as shorthand. JSX requires an explicit value: <input disabled={true} /> or simply <input disabled /> (which JSX treats as true).

These differences are small individually but add up when converting a large HTML template. This tool handles all of them automatically.

Common use cases

  • •Migrating templates: Convert existing HTML templates from a non-React project (Django, Rails, static sites) into React components.
  • •Design tool exports: Tools like Figma, Webflow, and Framer export HTML that needs conversion to JSX before it can be used in React.
  • •Stack Overflow snippets: HTML examples from documentation or forums need conversion before use in a React codebase.
  • •Email template adaptation: Convert HTML email templates to React Email or MJML-React components.

FAQ

Q: Does the tool handle SVG attributes? A: Yes. SVG attributes like stroke-width are converted to strokeWidth, fill-rule to fillRule, and so on. SVG in JSX follows the same camelCase convention as HTML attributes.

Q: What about data-* and aria-* attributes? A: These are left unchanged. React supports data-* and aria-* attributes with their original hyphenated names.

Q: Does it handle HTML comments? A: HTML comments (<!-- ... -->) are converted to JSX comments ({/* ... */}), since HTML comment syntax is not valid in JSX.

Is my data safe?

Yes. This tool runs entirely in your browser. Your data is never sent to our servers.

How to use HTML to JSX

  1. Paste your HTML into the input panel. This can be a snippet from a template, a component from a design tool's export, or any valid HTML.
  2. Review the JSX output in the output panel. The tool automatically applies all necessary transformations.
  3. Verify the changes — key transformations include class to className, for to htmlFor, inline style strings to JavaScript objects, and self-closing void elements like <img> and <br>.
  4. Copy the JSX and paste it into your React component.

What is JSX and how does it differ from HTML?

JSX (JavaScript XML) is a syntax extension for JavaScript used by React to describe UI structure. It looks like HTML, but it is actually syntactic sugar for React.createElement() calls. Because JSX is embedded in JavaScript, it must follow JavaScript's rules, which creates several differences from standard HTML.

The most common difference is attribute naming. HTML attributes that collide with JavaScript reserved words are renamed: class becomes className (because class is a reserved word in JavaScript), and for becomes htmlFor (because for is a loop keyword). Event handler attributes are camelCased: onclick becomes onClick, onchange becomes onChange.

Inline styles work differently. In HTML, styles are strings: style="color: red; font-size: 16px". In JSX, styles are JavaScript objects with camelCased property names: style={{ color: "red", fontSize: "16px" }}. Numeric values do not need units — React assumes pixels for most properties.

Self-closing elements are required for void elements. In HTML, <img src="..."> and <br> are valid. In JSX, they must be self-closed: <img src="..." /> and <br />. Forgetting the slash causes a parse error.

Boolean attributes also differ. HTML allows <input disabled> as shorthand. JSX requires an explicit value: <input disabled={true} /> or simply <input disabled /> (which JSX treats as true).

These differences are small individually but add up when converting a large HTML template. This tool handles all of them automatically.

Common use cases

  • Migrating templates: Convert existing HTML templates from a non-React project (Django, Rails, static sites) into React components.
  • Design tool exports: Tools like Figma, Webflow, and Framer export HTML that needs conversion to JSX before it can be used in React.
  • Stack Overflow snippets: HTML examples from documentation or forums need conversion before use in a React codebase.
  • Email template adaptation: Convert HTML email templates to React Email or MJML-React components.

FAQ

Q: Does the tool handle SVG attributes? A: Yes. SVG attributes like stroke-width are converted to strokeWidth, fill-rule to fillRule, and so on. SVG in JSX follows the same camelCase convention as HTML attributes.

Q: What about data-* and aria-* attributes? A: These are left unchanged. React supports data-* and aria-* attributes with their original hyphenated names.

Q: Does it handle HTML comments? A: HTML comments (<!-- ... -->) are converted to JSX comments ({/* ... */}), since HTML comment syntax is not valid in JSX.

Is my data safe?

Yes. This tool runs entirely in your browser. Your data is never sent to our servers.