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 blocks of text or code line by line. See added, removed and unchanged lines with color highlighting. Free, fast and runs in your browser.
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.
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.
Base58 Encoder
Encode and decode Base58 online with the Bitcoin alphabet. Convert text to Base58 or back, UTF-8 safe, no confusing 0 O I l. Runs in your browser.
Base64 Decode
Decode Base64 to plain text online. Paste a Base64 or base64url string and get instant UTF-8 output. Free, fast and runs in your browser.