Convert HTML to JSX
Transform HTML into valid JSX for React and Next.js. Free, in your browser, no file upload.
Why use this converter
HTML to JSX without syntax errors
Total privacy
Conversion happens entirely in your browser with pure JavaScript. Your code never leaves your device.
Complete transformations
We apply all necessary conversions: attributes, styles, events, void tags, and comments. No manual steps.
Compatible with React and Next.js
The resulting JSX is valid for React 16+, Next.js 12+, and any React-based framework like Gatsby or Remix.
Instant
Conversion happens in milliseconds with no server calls. Paste and copy, no waiting.
How it works
Three steps, no hassle
Paste your HTML
Paste the HTML code you want to convert into the input field. It can be full HTML documents or fragments.
Automatic conversion
The converter applies all necessary transformations: class→className, for→htmlFor, inline styles to JS object, and self-closing void tags.
Copy the resulting JSX
Copy the ready-to-use JSX directly into your React or Next.js components.
FAQ
Got questions?
The main transformations are: class→className (class is a reserved word in JS), for→htmlFor (for is also reserved), inline styles converted from CSS string to JavaScript object with camelCase properties, void tags self-closed (<br>→<br />, <img>→<img />, <input>→<input />), and HTML comments converted to JSX comments {/* */}.
React/Next.js requires JSX because components are written in JavaScript. JSX is syntactic sugar over React.createElement(). When compiled by Babel or the Next.js compiler, each JSX tag is converted to JavaScript function calls, making it impossible to use JS reserved words like class or for as attributes.
In HTML: style="color: red; font-size: 16px". In JSX: style={{ color: 'red', fontSize: '16px' }}. CSS properties in kebab-case are converted to camelCase (font-size→fontSize, background-color→backgroundColor), and values are converted to JavaScript strings or numbers.
Event handlers in HTML use lowercase (onclick, onchange, onsubmit). In JSX they are converted to camelCase: onclick→onClick, onchange→onChange, onsubmit→onSubmit, onmouseover→onMouseOver. The value changes from a JS code string to a function reference: onclick="myFunction()"→onClick={myFunction}.
Void elements in HTML are tags with no content or closing tag: <br>, <img>, <input>, <hr>, <meta>, <link>. In JSX, XML requires all elements to be explicitly closed, so they must be written as <br />, <img />, etc. Without self-closing, the JSX compiler will throw a syntax error.
React JSX history (Facebook 2013), HTML vs JSX differences, migration from HTML templates to React components, Next.js development workflow
JSX (JavaScript XML) was introduced by Facebook in 2013 alongside React as a JavaScript syntax extension that allows writing HTML-like structures directly in JS code. Although React can optionally be used without JSX through direct calls to React.createElement(), JSX quickly became the de facto standard because it dramatically improves the readability of component code. Babel and later Next.js's SWC compiler transform JSX into plain JavaScript during the build process.
The differences between HTML and JSX result from JSX operating in the JavaScript context. The most important: class is a reserved word in JavaScript (for defining ES6 classes), so React chose className as the equivalent attribute. Similarly, for is a reserved word (for loops), so the <label> attribute is written as htmlFor. Inline styles require a JavaScript object instead of a CSS string because it is safer in a JS context and allows variable interpolation. CSS properties are written in camelCase because the hyphen (-) is the subtraction operator in JavaScript.
Migrating static HTML templates to React components is a frequent use case: designers or developers working with plain HTML need to integrate their designs into Next.js or Create React App projects. The manual process is tedious and error-prone, especially with complex HTML containing many style attributes, event handlers, and void elements. Automated HTML-to-JSX conversion tools significantly accelerate this migration process in projects of any scale.