Souus Tools
Sponsor

Development

HTML to JSX Converter — Paste Markup, Get React

Convert HTML into valid JSX: class becomes className, inline styles become objects, void elements self-close, and comments are converted.

Free to use No sign-up Runs in your browser

Tool workspace

JSX
<div className="card" style={{ padding: '16px', backgroundColor: '#f8fafc' }}>
  <label htmlFor="email">Email</label>
  <input id="email" type="email" required />
  {/* submit */}
  <button onClick="send()">Send</button>
</div>

Parsing and conversion run entirely in your browser; the markup is never uploaded.

Why HTML Is Not Valid JSX

JSX looks like HTML but is compiled to JavaScript, so several things differ. Attribute names that collide with JavaScript reserved words are renamed, most visibly class to className and for to htmlFor. Multi-word attributes become camelCase, while data- and aria- attributes keep their hyphens. Inline style must be an object rather than a string. Void elements such as img and br must be explicitly self-closed. Comments become JavaScript expressions, literal braces must be escaped, and sibling roots need a fragment wrapper. This converter applies all of those rules with its own parser, so the result is deterministic rather than whatever the browser DOM decided to repair.

How to Convert Markup

  1. 1Paste an HTML snippet: a template fragment, an email layout, or markup copied from a design handoff.
  2. 2Read the converted JSX, which updates as you type.
  3. 3Turn on component wrapping to get a complete exported function component instead of a bare fragment.
  4. 4Give the component a name; an unusable name falls back to a valid identifier rather than emitting broken JavaScript.
  5. 5Copy the result into your project and replace inline event handler strings with real functions.

Where This Comes Up

Port a static template

Move an existing HTML page or partial into a React codebase without hand-editing every attribute.

Use a snippet from documentation

Component libraries and CSS frameworks publish plain HTML examples; convert them before pasting into a component.

Migrate an email or landing page

Convert table-heavy markup with inline styles, which is the most tedious kind to translate by hand.

Fix a build error fast

When a paste fails to compile, run it through here to see exactly which attributes and self-closing rules were wrong.

Frequently asked questions

Why are data- and aria- attributes left alone?

React passes those through to the DOM verbatim, so they keep their hyphens. Only attributes React defines a camelCase property for are renamed, which is why data-test-id stays as it is while tabindex becomes tabIndex.

What happens to inline event handlers?

An attribute such as onclick is renamed to onClick, but its value stays a string. That is intentional: a string is not a valid handler in React, so the output makes the remaining work obvious rather than inventing a function that might not match your code.

Why did my markup get wrapped in <> and </>?

JSX expressions must have a single root. When the input has several top-level elements, the converter adds a fragment so the result compiles. If you only need one root, convert that element on its own.

Does the converter handle malformed HTML?

It ignores stray closing tags the way a browser does, but reports unterminated tags and comments rather than guessing. It does not run a full HTML5 tree-construction algorithm, so deliberately broken markup may need cleaning first.