HTML to JSX Converter

An HTML to JSX converter transforms plain HTML markup into valid JSX syntax for React components. It renames reserved attributes (class → className, for → htmlFor), converts inline style strings into JavaScript objects, maps HTML events to camelCase React handler props, wraps boolean attributes, self-closes void elements, and preserves data-* and aria-* attributes as-is. The output is JSX-ready source that you paste into your React component file and pass through your project's Babel or TypeScript compiler.

class is a reserved keyword in JavaScript. Because JSX is transpiled JavaScript, using class as a property name would conflict with the JavaScript class declaration syntax. React's DOM renderer requires className for the HTML class attribute. Similarly, for is a reserved loop keyword, so label elements use htmlFor in JSX. The converter handles both mappings automatically.

HTML inline styles are strings: style="color: red; margin-top: 8px". JSX requires style to be a JavaScript object with camelCased property names: style={{ color: "red", marginTop: 8 }}. The converter splits the style string on semicolons, camelCases each CSS property name, converts simple pixel values to numbers (8px → 8), and strips !important since it has no meaning in React inline styles.

React uses a standardised set of property names that differ from their HTML equivalents. Examples include tabindex → tabIndex, readonly → readOnly, maxlength → maxLength, colspan → colSpan, rowspan → rowSpan, crossorigin → crossOrigin, datetime → dateTime, formaction → formAction, contenteditable → contentEditable, spellcheck → spellCheck, autofocus → autoFocus, and allowfullscreen → allowFullScreen. ToolsSonic maps over 35 HTML attributes to their correct React DOM counterparts.

HTML event attributes like onclick, onchange, onsubmit, onfocus, and onblur are camelCased to their React equivalents: onClick, onChange, onSubmit, onFocus, onBlur. The converter supports 31 event mappings including mouse, keyboard, touch, pointer, scroll, wheel, animation, and transition events. Inline handler strings such as onclick="submitForm()" are never executed — they are replaced with a {/* TODO */} comment that flags the location for manual replacement.

In React, uncontrolled inputs that have a pre-set value should use defaultValue to set the initial value without making the input controlled. The converter maps value attributes on input and select elements to defaultValue, and textarea element content to the defaultValue prop, so the output is correct for uncontrolled component patterns. You can disable this with the value → defaultValue toggle.

Enabling TypeScript mode wraps the component as export const ComponentName: React.FC = () => (...) instead of the plain arrow function export. The download button changes from .jsx to .tsx. This gives you a typed starting point — add your own prop interface and import React from "react" before compiling. The component name is editable in the Name field.

A JSX component must return a single root element. When HTML has multiple top-level nodes, wrapping them in a <div> changes the DOM structure. A fragment <> … </> groups them without adding a real DOM node. When Wrap in fragment is enabled and the converted HTML has more than one top-level node, the converter automatically wraps them in a fragment.

A <style> tag inside a React component cannot use a plain stylesheet string. When the style tag option is enabled, the converter transforms <style> blocks to self-closing JSX with dangerouslySetInnerHTML={{ __html: `...` }}, matching the pattern React developers actually use.

When Wrap as component is enabled, the converter generates an export const ComponentName = () => (...) arrow function. The Name field lets you type any valid PascalCase identifier such as HeroSection, ProductCard, or NavBar. If the name starts with a lowercase letter or contains invalid characters they are auto-corrected. The default name is ConvertedMarkup.

HTML boolean attributes like disabled, required, hidden, readonly, multiple, and selected are valueless or self-valued. In JSX, boolean props are written without a value: disabled, required, hidden. The converter detects these attributes and omits the = value, producing valid JSX boolean syntax. checked on input elements is converted to defaultChecked for uncontrolled components.

HTML comments <!-- text --> are not valid inside JSX expressions. They must be written as JavaScript comments inside curly braces: {/* text */}. The converter maps every HTML comment to a JSX comment block. Double hyphens inside the comment are single-hyphenated to avoid issues with comment parsing.

Void elements are HTML elements with no closing tag: br, img, input, meta, link, hr, source, embed, area, base, col, param, track, and wbr. In JSX, these must be self-closing: <br />, <img src="…" />, <input type="text" />. The converter automatically self-closes all void elements to produce valid JSX.

React preserves data-* and aria-* attributes exactly as-is in lowercase without camelCasing. The converter keeps them unchanged. No mapping is applied, and they are never incorrectly camelCased.

HTML entities such as &amp;, &lt;, &gt;, and &quot; are decoded to their UTF-8 character equivalents when Decode entities is enabled. In JSX, text content can include literal Unicode characters directly. Curly braces in text are escaped to &#123; and &#125; to prevent JSX from interpreting them as expressions.

Yes. Open HTML reads a local .html or .htm file using the browser FileReader API. The file contents are loaded into the input panel and converted immediately, entirely in memory. The file is never sent to a server.

Yes. Click Download .jsx to save a converted.jsx file locally, or enable TypeScript mode and Wrap as component to get Download .tsx that saves a converted.tsx file. Copy JSX puts the output on the clipboard immediately. No server or account is required.

No. The output is JSX-ready source text — it is not compiled, executed, sanitized, or validated against React runtime rules. You must import React, add your event handlers, pass your props, and run the code through your project's Babel or TSC compiler and lint pipeline before it is ready to use.

The converter is completely free with no account required. All conversion runs locally in your browser using the native DOMParser API. No HTML is uploaded to any server, stored in localStorage, or retained after you close the tab.

HTML to JSX conversion changes attribute names, inline styles, events, boolean props, and void element syntax to produce React-compatible JSX. HTML escaping replaces characters like &, <, >, and " with HTML entity references so text is safe to display in a browser. The two operations are unrelated and serve different purposes.

After each conversion the tool records the document title or element count and a summary of mappings and warnings in an 8-item history list. History is stored only in page memory and disappears when you close or reload the tab.