HTML to JSX
Convert HTML to JSX for React.
About the HTML to JSX
Turns a plain HTML snippet — a Bootstrap block, a design handoff, an email template — into JSX you can paste into a React component. class becomes className, for becomes htmlFor, hyphenated attributes are camel-cased while data-* and aria-* are left alone, inline style strings become style objects, void elements are self-closed, and HTML comments become JSX comments.
How to use the HTML to JSX
- Paste your HTML into the HTML panel, or press Sample to load an example.
- Press Convert.
- Press Copy, or Download to save component.jsx.
- Wrap the result in a component function, and in a single root element if it has several top-level nodes.
Frequently asked questions
- What happens to inline style attributes?
- They become a JSX object literal with camel-cased properties and string values, so style="padding: 16px" comes out as style={{ padding: "16px" }}. Custom properties keep their name, quoted, as "--brand".
- Are data- and aria- attributes renamed?
- No, both pass through unchanged, which is what React expects. Every other hyphenated or colon-separated attribute is camel-cased.
- How are boolean attributes like required handled?
- An attribute with an empty value is emitted as a bare name, so <input required> becomes <input required />, which JSX reads as true.
- Why did braces in my text turn into {?
- A literal { in JSX text opens an expression. Escaping the braces as HTML entities keeps them as visible characters instead of a syntax error.
- Can I paste a whole HTML page?
- Only the body content is converted. Anything that belongs in <head> — title, meta, link tags — is dropped, since it has no place inside a component.