What attributes are converted?

class → className, for → htmlFor, and inline style strings are parsed into React style objects.

Does it wrap the markup in a component?

Yes, the output is wrapped in a functional component scaffold with a configurable component name.

Are self-closing tags handled?

Yes, void elements like and are normalised to self-closing JSX.

Is my data uploaded to a server?

No. This tool runs entirely in your browser using standard web APIs, so your input never leaves your device and nothing is logged or stored on our servers.

Does it work offline and on mobile?

Yes. Once the page has loaded it keeps working without a network connection, and the layout is responsive so it stays usable on phones and tablets.

HTML to JSX Converter

Convert HTML markup into clean React/JSX component code.

Support

Works Offline

Privacy First

No Login

No API

Keep comments

Wrap in component

HTML

JSX

<div className="card" style={{ backgroundColor: "#fff", padding: "12px" }}>
  {/* greeting */{"}"}
  <label htmlFor="name">Name</label>
  <input type="text" id="name" value="Ada" readOnly />
  <img src="/logo.png" alt="Logo" />
  <br />
  <p tabIndex="0">Hello &amp; welcome</p>
</div>

About the HTML to JSX Converter

Paste HTML and convert it into a React functional component written in JSX. Class attributes become className, for attributes become htmlFor, inline style strings become style objects, self-closing tags are normalised, and the output is wrapped in a component scaffold ready to paste into your project.

Examples

Button

<button class="btn" style="color:red">Click</button>

Output

<button className="btn" style={{ color: "red" }}>Click</button>

Keyboard shortcuts

Copy the main outputCtrl / ⌘ + Shift + C
Download the resultCtrl / ⌘ + S
Share this toolCtrl / ⌘ + Shift + S
Reset the inputsAlt + R
Open the tool search paletteCtrl / ⌘ + K

Related tools

Android APK Analyzer & Explorer

Dev Utilities

Open an APK, decode its manifest and browse or download every file inside.

Code Minifier & Beautifier

Dev Utilities

Minify or beautify JavaScript, CSS, HTML, JSON, XML and SQL.

JavaScript / TypeScript Playground

Dev Utilities

Write and run JavaScript or TypeScript with a live console.

JavaScript Object to JSON

Dev Utilities

Convert a JS object literal into strict, valid JSON.

JSON to C# Class

Dev Utilities

Generate C# classes or records from JSON, with nullable reference types.

Maven ↔ Gradle Converter

Dev Utilities

Convert Maven POM XML to Gradle Kotlin DSL and back.

Frequently asked questions

Version 1.0.0 · Updated 2026-08-25 · Runs entirely in your browser