HTML to JSX Converter
Paste HTML and get JSX you can drop straight into a React component. It renames class and for, camelCases attributes and event handlers, converts inline styles into style objects, and self-closes void elements like br and img.
How to convert HTML to JSX
- Paste your HTML markup into the input box.
- The JSX appears instantly on the right with attributes and styles fixed up.
- Copy the result and paste it into your React component's return.
Examples
Label, input and a line break
<label for="email" class="lbl">Email</label><input type="email"><br>
<label htmlFor="email" className="lbl">Email</label><input type="email" /><br />
Inline style to a style object
<div style="color: red; font-size: 12px">Hi</div>
<div style={{ color: 'red', fontSize: '12px' }}>Hi</div>Frequently asked questions
Why does class become className and for become htmlFor?
JSX is JavaScript, where class and for are reserved words. React uses className and htmlFor instead, so the converter renames them automatically.
Why are inline styles turned into objects?
In JSX the style attribute takes a JavaScript object, not a string. The converter splits the declarations, camelCases each property (font-size becomes fontSize), and quotes the values so style={{ color: 'red' }} is valid.
What happens to void elements like br and img?
JSX requires every tag to be closed. Void elements such as br, hr, img, input, meta and link are self-closed, so <br> becomes <br />.
Are data and aria attributes changed?
No. React keeps data-* and aria-* attributes exactly as written, so the converter leaves them untouched while it camelCases known attributes like tabindex, maxlength and colspan.
Is my HTML sent to a server?
No. The conversion runs entirely in your browser, so nothing you paste leaves your machine.
What are the limitations?
This is a fast text transform, not a full parser. It does not validate HTML, fix unbalanced tags, escape curly braces in text, or convert script and style tag contents. Review the output before shipping.
Related tools
Diff Checker
Compare two texts or files side by side or unified, with word and character highlighting, ignore whitespace or case, collapse unchanged, and .diff export.
JSON Formatter
Format, validate and minify JSON online. Pretty-print with custom indentation, sort keys and catch syntax errors. Runs in your browser.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
ASCII Table
Full ASCII table for all 128 codes with decimal, hex, octal and binary values, character names and descriptions. Search by code, hex or character.
Aspect Ratio Box Generator
Generate CSS for a responsive aspect-ratio container. Use the modern aspect-ratio property or the padding-top fallback, then copy the ready code.
Aspect Ratio Calculator
Calculate aspect ratios fast. Enter a ratio like 16:9 and one dimension to get the other, or enter width and height to simplify the ratio.