HTML to JSX Converter

Convert HTML into valid React JSX in your browser — class becomes className, void tags self-close, and inline styles become style objects. Your markup stays on your device.

The HTML to JSX Converter runs entirely in your browser. The markup you paste is parsed and transformed on your device and is never uploaded to ArrayKit.

Open the HTML Formatter

About HTML to JSX Converter

The HTML to JSX Converter turns a block of HTML into JSX you can drop straight into a React component. It renames the attributes React insists on — class becomes className and for becomes htmlFor — camelCases the rest (tabindex → tabIndex, colspan → colSpan), and self-closes void elements like br, img, and input so the markup is valid. Inline style="color:red" strings are parsed into style={{ color: 'red' }} objects with camelCased properties, and HTML comments become JSX comments. Flip on the component option to wrap everything in an exported function. It is built for developers porting a design, an email template, or a static page into React. Every conversion runs in your browser — the markup you paste never leaves your device.

Features

How to use the HTML to JSX Converter

  1. Paste your HTML into the input box on the left
  2. Read the converted JSX in the output panel on the right
  3. Toggle 'Wrap in component' and name it to get a ready-to-use component
  4. Copy the JSX or download it as a .jsx file

Example

Input

<label for="name" class="lbl" tabindex="0">Name</label>
<input type="text" required>

Output

<label htmlFor="name" className="lbl" tabIndex="0">Name</label>
<input type="text" required />

for becomes htmlFor, class becomes className, tabindex becomes tabIndex, and the void <input> self-closes.

Common errors & troubleshooting

Frequently asked questions

Which HTML attributes get renamed to JSX?
class becomes className and for becomes htmlFor. Many all-lowercase attributes are camelCased — tabindex to tabIndex, colspan to colSpan, maxlength to maxLength, readonly to readOnly — while data-* and aria-* attributes are kept exactly as written.
How does it convert an inline style attribute?
A style="color: red; font-size: 12px" string is parsed into a React style object, style={{ color: 'red', fontSize: '12px' }}, with each CSS property camelCased. CSS custom properties like --brand and vendor prefixes are preserved.
Does it self-close void elements like <br> and <img>?
Yes. HTML void elements — br, img, input, hr, meta, link, source, and the rest — are emitted self-closed (<br />, <img … />) so the JSX is valid. Empty non-void elements are self-closed too.
What happens to HTML comments during conversion?
HTML comments are rewritten to JSX comment syntax. If the comment text contains a star-slash sequence it is broken up so it cannot close the JSX comment early and break your build.
Can it wrap the output in a React component?
Turn on 'Wrap in component' and give it a name. The tool emits an exported function that returns your JSX, wrapping multiple top-level elements in a fragment so there is a single root element.
Will it convert onclick and other inline event handlers?
Inline event attributes are camelCased — onclick to onClick, onchange to onChange — but the value stays a string. You will still need to swap the string for a real handler function in your component.

Related tools

All ArrayKit tools