HTML to JSX Converter

Q: Why does class become className?

Because JSX compiles to JavaScript, and class is a reserved word there — you cannot use it as a property name in the object React builds from your markup. The same applies to for, which becomes htmlFor. Those two are the ones everybody hits, but the rule is broader: JSX attribute names follow the DOM property names rather than the HTML attribute names, which is why tabindex becomes tabIndex and readonly becomes readOnly. Get one wrong and React silently ignores it in development while warning in the console.

Q: What happens to inline styles?

A style attribute in HTML is a string; in JSX it must be an object with camelCased property names, so style="background-color: red" becomes style={{backgroundColor: 'red'}}. The double braces trip people up — the outer pair is the JSX expression, the inner pair is the object literal. Numeric values keep their units as strings, because React only adds px automatically for a specific set of properties and guessing wrong is worse than being explicit.

Q: Why are void elements getting a closing slash?

Because JSX is XML-like and every element must be closed, whereas HTML lets br, img, input and the rest stand alone. So becomes and an img tag gains a trailing slash. This is not optional — an unclosed void element is a syntax error in JSX rather than a style preference. The converter adds the slash to every void element whether or not the source had one.

Q: What happens to comments?

An HTML comment is not valid inside JSX, so each becomes a JSX expression containing a JavaScript comment — the curly-brace-and-slash-star form. That is genuinely how you write a comment in JSX markup, and it is why the output looks unfamiliar. They are preserved rather than stripped, since a comment in a template is usually there to explain something to whoever maintains it, and silently dropping it loses that.

Q: Do I need a single root element?

A React component must return one element, so markup with several siblings at the top level needs wrapping. The converter wraps them in a fragment — the empty-tag form — which groups them without adding a real DOM node. If you paste a single rooted element no wrapper is added. This is worth knowing when the output looks like it has gained an odd empty tag at the top: that is the fragment, and it renders nothing.

Q: Will the output work as a component as-is?

It is valid JSX, but it is markup rather than a component — you still need to wrap it in a function and return it. It also cannot know your intent: anything dynamic in the original, like a templating placeholder or a server-rendered value, comes through as literal text and needs replacing with an expression. Treat the output as a correct mechanical translation that saves the tedious attribute renaming, then make it a component yourself.

Convert HTML into valid JSX, with attributes renamed, inline styles turned into objects and void elements closed.

HTML

Indent

JSX

Conversion runs in your browser. The output is valid JSX markup, but it still needs wrapping in a component function, and anything dynamic in the original arrives as literal text.

What It Does

JSX looks like HTML and is not, and the differences are exactly the sort that produce silent failures rather than errors. Attribute names follow DOM properties rather than HTML, so class becomes className and for becomes htmlFor — both reserved words in JavaScript — along with a long tail of renames like tabindex to tabIndex. Every element must be closed, so void elements such as br and img gain a trailing slash. Inline styles stop being strings and become objects with camelCased keys. Comments change form entirely. This does all of that mechanically, which is most of the work in moving a template into React, and wraps multiple top-level elements in a fragment because a component has to return one thing.

When to Use It

You are porting an existing HTML template or email into a React component.
A designer supplied static markup and you need it as JSX without renaming every attribute by hand.
You copied an element out of the browser inspector and want it in a component.
An SVG icon needs to go inline in React, where every attribute name changes.
You are migrating a server-rendered page piece by piece and want each fragment translated accurately.

Worked Examples

<div class="card"><label for="name">Name</label><input id="name" readonly></div>

The three renames everyone hits at once. class and for are reserved words in JavaScript so they become className and htmlFor, readonly becomes readOnly, and the input gains a closing slash because JSX has no void elements.

<p style="background-color: red; font-size: 14px">Hi</p>

A style string becomes an object with camelCased keys and double braces — the outer pair is the JSX expression, the inner is the object literal. Values stay strings, since React only auto-adds px for some properties.

<h1>Title</h1>
<!-- a note -->
<p>Body</p>

Two top-level siblings, so the output is wrapped in a fragment — a component must return one element. The comment becomes the JSX brace-and-comment form rather than being dropped.

Features

Full attribute renaming including the SVG camelCase set

class to className and for to htmlFor

Inline style strings converted to objects

Void elements closed correctly

HTML comments converted to the JSX form

Multiple roots wrapped in a fragment

Boolean attributes handled

Indentation preserved and normalised

Count of every attribute that was renamed

Runs entirely in your browser

How to Use

1. Paste your HTML, or import a file. 2. The JSX appears immediately below. 3. Check the list of renamed attributes to see exactly what changed. 4. Copy the result into your component, wrapping it in a function and a return. 5. Replace any templating placeholders with real expressions.

Common Mistakes

Leaving class and for as they are. Both are reserved words in JavaScript, so React ignores them and only warns in the console — the styling simply does not apply.
Passing a style string. JSX expects an object with camelCased keys, and a string throws rather than failing quietly.
Forgetting to close void elements. An unclosed br or img is a syntax error in JSX, not a style choice.
Returning several top-level elements. A component must return one thing, so siblings need a fragment or a wrapper.
Treating the output as a finished component. It is markup — it still needs a function around it, and anything dynamic in the original comes through as literal text.

Frequently Asked Questions

Why does class become className?

What happens to inline styles?

Why are void elements getting a closing slash?

What happens to comments?

Do I need a single root element?

Will the output work as a component as-is?