Skip to content

HTML to JSX

Developer ToolsHTML, CSS and Frontend
JSX —
Elements converted
—
Attributes renamed
—
Style strings to objects
—
Void tags self-closed
—
Comments wrapped
—
Top-level elements
—

Paste HTML and the converter rewrites it as JSX for a React component. It renames attributes such as class to className and for to htmlFor, turns style="font-size: 12px" into style={{ fontSize: '12px' }}, closes void tags like img and br, and wraps HTML comments in braces.

About this tool

Moving a template, a Bootstrap snippet or a designer's mock-up into React means fixing the same handful of things every time: className instead of class, camelCase attributes like tabIndex, an object for every inline style, and a slash on every img and input. Missing one gives a compile error or a console warning. This converter does those edits in one pass and counts each kind, so you can see what changed. It also flags markup with more than one top-level element and inline event handlers, which need a hand edit. It works on the markup only: it does not split the result into components, and script bodies inside onclick attributes stay as strings that you rewrite as functions.

How to use it

  1. Paste the HTML

    Paste a snippet into the box or open an .html or .txt file from your device.

  2. Read the JSX

    The converted markup appears as you type, with counts of renamed attributes, styles and closed tags.

  3. Check the warnings

    Fix any flagged event handlers or multiple top-level elements before pasting into a component.

  4. Copy the result

    Copy the JSX into your component's return statement.

Examples

A label with class and for

HTML markup
<label for="email" class="field">Email</label>

Result JSX: <label htmlFor="email" className="field">Email</label>
Elements converted: 1
Attributes renamed: 2
Style strings to objects: 0
Void tags self-closed: 0
Comments wrapped: 0
Top-level elements: 1

  1. Renamed attributes: for → htmlFor, class → className.
  2. Inline styles converted to objects: 0.
  3. Void elements closed with />: 0; comments wrapped as {/* */}: 0.

Both attributes are JavaScript reserved words, so React names them className and htmlFor.

An unclosed img tag

HTML markup
<img src="logo.png" alt="Logo">

Result JSX: <img src="logo.png" alt="Logo" />
Elements converted: 1
Attributes renamed: 0
Style strings to objects: 0
Void tags self-closed: 1
Comments wrapped: 0
Top-level elements: 1

  1. No attributes needed renaming.
  2. Inline styles converted to objects: 0.
  3. Void elements closed with />: 1; comments wrapped as {/* */}: 0.

HTML lets img stand open; JSX needs the self-closing slash or the parser stops.

An inline style string

HTML markup
<div style="color: red; font-size: 12px">Hi</div>

Result JSX: <div style={{ color: 'red', fontSize: '12px' }}>Hi</div>
Elements converted: 1
Attributes renamed: 0
Style strings to objects: 1
Void tags self-closed: 0
Comments wrapped: 0
Top-level elements: 1

  1. No attributes needed renaming.
  2. Inline styles converted to objects: 1.
  3. Void elements closed with />: 0; comments wrapped as {/* */}: 0.

The style string becomes an object with camelCase keys, so font-size turns into fontSize.

How it is calculated

for each tag: rename attributes, style string → object, void tag → self-closed; comment → {/* */}; text braces → {'{'}

attributes
HTML names mapped to React DOM names, such as class to className and on-events to camelCase
style
a CSS declaration list split at semicolons, each property camelCased, values kept as strings
void tags
area, base, br, col, embed, hr, img, input, link, meta, param, source, track and wbr

The markup is scanned tag by tag. Attribute names that React spells differently are replaced from a fixed list taken from React's DOM attribute names; data- and aria- attributes are left as they are. Inline styles become object literals with camelCase keys, and custom properties keep their quoted names. Void elements get a closing slash, stray closing tags for them are dropped, and curly braces in text are escaped so JSX does not read them as expressions.

When not to use it

  • For a whole page with scripts and head tags, since JSX components render body content only.
  • For server templates with Handlebars or Jinja syntax, which the converter treats as plain text.

Common mistakes

  • Leaving onclick strings in place; React needs a function reference, not code in quotes.
  • Returning two sibling elements from a component without a fragment around them.
  • Pasting value attributes on inputs without adding onChange, which makes the field read-only in React.

Frequently asked questions

Why does React use className instead of class?

JSX compiles to JavaScript, where class is a reserved word for declaring classes. React follows the DOM property name, element.className, so the attribute is written className. The same reason gives htmlFor for the for attribute on labels.

How are inline styles converted?

The style string is split at semicolons and each property name is camelCased, so background-color becomes backgroundColor. Values stay as strings, for example fontSize: '12px'. CSS custom properties like –gap keep their names in quotes.

What happens to HTML comments?

JSX has no HTML comment syntax, so each comment is wrapped as a JavaScript block comment inside braces. That keeps the note in your source without rendering it.

Are data- and aria- attributes changed?

No. React accepts data-* and aria-* attributes with their hyphens, so they pass through untouched. Only names React spells differently, such as tabindex and maxlength, are renamed.

Why is there a warning about top-level elements?

A component's return value must be a single element. If the snippet has two or more siblings at the top, wrap them in a fragment or a parent div before using it.

Does it handle SVG attributes?

Common SVG attributes are renamed, including viewBox, stroke-width to strokeWidth, fill-rule to fillRule and xlink:href to xlinkHref. Rare presentation attributes outside the list keep their original spelling.

Cite this tool

Using this tool in an assignment, article or report? Copy a citation, or a link for your website.

APA

Tools Directory Editorial Team. (2026, October 18). HTML to JSX. Tools Directory. Retrieved October 26, 2026, from https://tools.milunir.com/developer-tools/html-css-and-frontend/html-to-jsx/

MLA

Tools Directory Editorial Team. “HTML to JSX.” Tools Directory, 18 Oct. 2026, https://tools.milunir.com/developer-tools/html-css-and-frontend/html-to-jsx/. Accessed 26 Oct. 2026.

Chicago

Tools Directory Editorial Team. “HTML to JSX.” Tools Directory. Last modified October 18, 2026. Accessed October 26, 2026. https://tools.milunir.com/developer-tools/html-css-and-frontend/html-to-jsx/.

Link<a href="https://tools.milunir.com/developer-tools/html-css-and-frontend/html-to-jsx/">HTML to JSX – Tools Directory</a>