Skip to content
ToolQivo

HTML to JSX

Convert HTML into valid JSX, with every attribute renamed correctly.

Developer Tools Reviews Free · no sign-up

Quick Tool Overview

The HTML to JSX converter handles every difference between the two: reserved-word attributes, camelCased names, self-closing void elements, style strings becoming objects, and braces in text needing escapes.

What it does
Converts HTML markup into valid JSX
You give it
An HTML fragment or page
You get back
JSX, optionally wrapped as a component
Best for
Porting a template or a snippet into React
Developer Tools Free, unlimited use No sign-up Runs in your browser

About the HTML to JSX

JSX looks like HTML and differs in a dozen small ways, every one of which is a build error. This converts a fragment properly: class becomes className, for becomes htmlFor, every hyphenated attribute becomes camelCase, and void elements get their self-closing slash.

Inline styles are the conversion people get wrong most often. A style attribute is a string in HTML and an object in JSX, with camelCase property names and quoted values, so style="font-size: 12px" has to become style={{ fontSize: "12px" }}. Comments become JSX expression comments, braces in text content are escaped because they are syntax, and the whole thing can be wrapped in a component function ready to paste into a file.

Key features of the HTML to JSX

Every attribute renamed

class, for, tabindex, colspan, the SVG presentation attributes — around fifty names that differ, each mapped rather than guessed.

Styles become objects

style="font-size: 12px" becomes style={{ fontSize: "12px" }}, which is the conversion people most often do by hand and get wrong.

Braces escaped

A literal brace in text is JSX syntax, so it is escaped rather than becoming a build error.

Comments converted

HTML comments become JSX expression comments, which is the only form JSX accepts.

Handlers flagged, not faked

An onclick string cannot become a function automatically, so it is reported rather than silently producing broken code.

How to use the HTML to JSX

  1. 1

    Paste your HTML

    A fragment, a component's markup, or a whole page.

  2. 2

    Name the component

    The output is wrapped in a function with that name, ready to export.

  3. 3

    Check the warnings

    Inline event handlers cannot be converted automatically and are flagged.

  4. 4

    Copy the JSX

    Paste it straight into a .jsx or .tsx file.

Frequently asked questions

Because class is a reserved word in JavaScript. The same applies to for, which becomes htmlFor. React chose the DOM property names rather than the HTML attribute names.

Reviews of the HTML to JSX

What people who use the HTML to JSX think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the HTML to JSX. It takes half a minute and no account.

Write the first review

More developer tools