Skip to content
Devtoolry
Sign InJoin for Free

HTML to JSX

Convert HTML to JSX for React online: class becomes className, inline styles become objects, SVG attributes are camelCased and void tags self-close.

Runs in your browser · Nothing uploaded · No sign-up

Something not working, or missing a feature? Send feedback

About the HTML to JSX

The HTML to JSX Converter rewrites HTML so you can paste it into a React component: class becomes className, for becomes htmlFor, inline styles become style objects and SVG attributes such as stroke-width are camelCased. Void tags self-close, tags HTML closes implicitly are closed, and your formatting is kept.

Conversion happens in your browser, so your files and records stay private.

How to use the HTML to JSX

  1. Paste HTML or SVG markup.
  2. Choose JSX, or Component to wrap it in a function component, and name the component.
  3. Copy the JSX into your React or Next.js code.

HTML attributes that change in JSX

HTMLJSX
classclassName
forhtmlFor
tabindextabIndex
style="margin-top: 4px"style={{ marginTop: '4px' }}
onclickonClick
stroke-widthstrokeWidth
xlink:hrefxlinkHref
value (input)defaultValue
<br><br />

Sources: React: common components (props)

Examples

A form field

Input

<label class="field" for="email">Email <input id="email" type="email" required=""></label>

Result

<label className="field" htmlFor="email">Email <input id="email" type="email" required /></label>

required="" would be false in React, so it becomes a bare prop.

An SVG icon

Input

<svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path stroke-linecap="round" d="M5 12h14"/></svg>

Result

<svg viewBox="0 0 24 24" fill="none" strokeWidth="2"><path strokeLinecap="round" d="M5 12h14" /></svg>
Inline styles and braces

Input

<div style="margin-top: 8px; background-color: #f5f5f5">Hi {name}</div>

Result

<div style={{ marginTop: '8px', backgroundColor: '#f5f5f5' }}>Hi {'{'}name{'}'}</div>
As a component

Input

<h1>Hello</h1>
<p>Welcome back.</p>

Result

export default function Hero() {
  return (
    <>
      <h1>Hello</h1>
      <p>Welcome back.</p>
    </>
  );
}

Common mistakes

  • Text with braces. JSX reads { and } as code. They are escaped as {'{'}, so template placeholders such as {name} need to be turned into real expressions by hand.
  • Several root elements. A component returns one element, so several top-level tags are wrapped in a fragment (<>…</>).

Works well with the HTML to JSX

Frequently asked questions

What does the converter change?

Attribute names (class, for, tabindex, colspan and others), inline styles, SVG and xlink attributes, boolean attributes, comments ({/* */}) and void tags such as <br> and <img>, which must be self-closed in JSX.

What happens to onclick and other inline handlers?

They become React props with an arrow function, for example onClick={() => { save() }}. Code that uses this or event inside should be rewritten to use the event argument.

Why does value become defaultValue?

In React, value on an input makes it controlled, which needs an onChange handler. defaultValue and defaultChecked set the starting value like HTML does.

Does it work with TypeScript (TSX)?

Yes. The output is plain JSX, which is also valid TSX.

Related tools