HTML → JSX Converter

Overview

Converts raw HTML markup into JSX that a React component can render. The converter rewrites class to className, for to htmlFor, tabindex to tabIndex and about 50 other HTML attributes to their React names, turns style strings into style objects and inline on* handlers into arrow functions, self-closes void tags such as img and input, and turns HTML comments into JSX comment braces. Both panels update live, and clicking the output copies it.

How It Works

Paste HTML on the left. The JSX appears on the right immediately. Attribute renames (class, for, tabindex, colspan, maxlength, readonly and about 50 others, plus hyphenated SVG attributes such as stroke-width and xlink:href, and on* handlers) apply only inside tags, so text such as class=x and attributes such as data-class are left alone. Void elements ending without a slash gain one, so an unclosed img or input becomes self-closing, while tags already closed are left alone. HTML comments are rewritten as block comments in braces, which is the only legal comment form inside JSX children. Copy the output and paste it into your component's return statement.

Step-by-Step Usage Guide

1. Paste your HTML into the left panel.
2. Check the JSX output for the renamed className, htmlFor, and tabIndex attributes and self-closed void tags.
3. Check the generated style={{ ... }} objects: px lengths become numbers and other values stay strings.
4. Review the generated onClick={() => { ... }} handlers, since inline code is wrapped in an arrow function, then copy the output into your component.

Technical Specifications & Standards

The conversion is a tag and attribute tokenizer, not a full HTML-to-JSX compiler. Attributes are renamed from a table of about 50 HTML names (class, for, tabindex, colspan, maxlength, readonly, srcset and so on), on* handlers become camelCase, and hyphenated or colon SVG attributes are camelCased (stroke-width becomes strokeWidth, xlink:href becomes xlinkHref). Void tags come from a fixed list and are always written self-closed, and a tag already written with a slash is not doubled. Comments are converted to the JSX block form and the doctype is dropped. Inline style attributes are converted to objects: style="font-size: 14px" becomes style={{ fontSize: 14 }}, with px lengths as numbers and other values as strings. Event handler strings are wrapped in an arrow function: onclick="go()" becomes onClick={() => { go() }}, so review that the inline code still makes sense in a component. Values containing quotes or newlines become {"..."} expressions, braces in text are escaped as {"{"} and {"}"}, and script and style bodies become template literals. Attributes such as aria-label and data-id stay hyphenated because they are valid JSX as-is. The tool does not add the single root element JSX requires, so wrap multi-element output in a fragment yourself.

Targeted Use Cases

• Dropping a marketing team's HTML block into a React component.
• Converting legacy template markup during a migration to React.
• Fixing the class-to-className errors that break a page silently in React.
• Turning an email or landing-page HTML snippet into JSX for a prototype.

Notes & Gotchas

• Check the generated style objects; px values become numbers and every other value stays a string, so adjust any value that needs a different type.
• Review converted event attributes (onclick, onchange): they become camelCase props that wrap the inline code in an arrow function, which may need wiring to real handlers.
• Wrap converted output in a fragment or a single element, since JSX allows only one root node.
• Leave aria-* and data-* attributes hyphenated; unlike class and for, they are valid JSX without renaming.

Frequently Asked Questions