What about boolean attributes like checked or disabled?

They are rewritten with explicit JSX values (checked={true}) so React treats them as controlled, which avoids subtle warnings about uncontrolled inputs.

Is HTML entity decoding done?

Yes. &, <, and named entities are decoded to their literal characters because JSX text supports Unicode directly.

Is my HTML sent to a server?

No. Conversion happens locally in your browser.

Are inline event handlers like onclick converted?

The attribute is renamed to onClick, but the value stays as a string literal pointing to a function name. You will still need to wire it up to a real handler in your component.

html → jsx · class → className · self-close · style object · live

Convert HTML to JSX

Q: Is HTML entity decoding done?

Yes. &, <, and named entities are decoded to their literal characters because JSX text supports Unicode directly.

Q: Is my HTML sent to a server?

No. Conversion happens locally in your browser.

Q: Are inline event handlers like onclick converted?

The attribute is renamed to onClick, but the value stays as a string literal pointing to a function name. You will still need to wire it up to a real handler in your component.

Rewrite raw HTML so it can be dropped into a React component. Reserved attribute names are renamed, void elements self-close, and inline styles become JS objects.

HTML → JSX

Input

225 B

6 lines

Output

205 B

6 lines

Status

ready

live

Ratio

0.91×

out/in

input · html

output · jsx

<div className="card" style={{"color":"red","fontSize":"14px"}}>
  <label htmlFor="email">Email</label>
  <input type="email" id="email" autoComplete="off" />
  <img src="/logo.svg" alt="Logo" />
  
</div>

Quick Start

What gets rewritten

Comments are stripped, inline style attributes become camelCased JS objects, reserved attributes are renamed (class → className, for → htmlFor, tabindex → tabIndex…), and HTML void elements (img, input, br…) are forced to self-close so JSX parses them.

01
Paste HTML
Any HTML fragment — components, full pages, snippets from a CMS.
Parsing is strict-but-tolerant — comments and trailing commas are accepted on input where the source format historically permits them; output stays canonical.
inputstricttolerantliveparse
in · sourcehtml · live
```
<div class="card">
```
loaded · parsedtarget · ready
02
Rename attributes
class → className, for → htmlFor, plus the camelCase set React expects.
Conversion preserves type information where the target supports it (numbers stay numeric, booleans stay boolean) so the destination parser never has to re-coerce.
attrstype-preservinglosslesslivememoised
name · optionsrenamed · live
```
class → className
```
options applied · liveround-trip
03
Inline styles
style="color: red" becomes style={{ color: "red" }} with camelCased keys.
Re-encoding is idempotent: running output back through the same converter produces the same bytes, which keeps round-trips git-friendly.
styleidempotentround-tripdiff-cleandeterministic
str · convertedobject · ready
```
style={"color":"red"}
```
converted · livediff-clean
04
Copy or download
Paste into a React component file — TSX or JSX.
Copy writes via navigator.clipboard.writeText; downloads use the target’s native MIME so editors apply the right syntax highlighting on open.
exportclipboardtarget MIMEblobclient-side
✓ · copiedready · done
```
✓ Copied
```
shipped · ready to shipsuccess

Pro tips

Converting between formats, safely

Pick the strictest source format

Lossy formats hide bugs. Choose JSON or YAML as your source-of-truth, convert downstream as needed.

Round-trip in CI

If your converter is idempotent, your CI can verify A → B → A equals the original. Catches subtle data loss.

Numbers vs strings differ

YAML/TOML have a number type; CSV doesn’t. Quote IDs in CSV to keep leading-zero values intact.

Watch character encoding

Source format may be Latin-1 / Windows-1252; target should be UTF-8. Convert encoding before structure.

Preserve comments where you can

YAML and TOML support comments. Don’t silently drop them — they often encode intent.

Schema-aware beats blind

Use a schema to guide conversion. Field types, required-ness, and defaults survive better with structure.

Use Cases

When to convert HTML to JSX

Migrate, prototype, port marketing pages.

Designer hand-off

Take static HTML mockups straight into a React component. Type information survives: numbers stay numeric, booleans stay boolean, strings stay strings. The destination parser doesn't have to re-coerce, which avoids the "'true' becomes "true"" bug class.

round-trip safe

Email to component

Lift an email template into a React renderer. Run output back through the inverse converter to verify idempotent round-trips in CI. A → B → A should produce byte-identical input — if it doesn't, you've found data loss.

type-preserving

Static-site to app

Move marketing-site partials into a Next.js app. Comments and metadata survive where the target format supports them (YAML, TOML, HCL). The tool doesn't silently drop intent-encoded annotations, which keeps your config self-documenting.

schema-aware

Storybook props

Hardcode HTML into a Story while wiring up real props. Pair with a schema (JSON Schema, OpenAPI, Zod, Pydantic) to catch shape drift on either side. Catch breaking changes at conversion time rather than at runtime in production.

lossless

CMS imports

Wrap exported WYSIWYG blocks as React components. Output respects target-format conventions: quoting in CSV, indent in YAML, brackets in JSON. Existing parsers don't need patches, and the result drops into legacy pipelines unchanged.

diff-clean

Code review

Verify HTML-to-React diffs in a PR without IDE help. Encoding-aware: handles UTF-8 vs UTF-16 vs Latin-1 / Windows-1252 transparently. The character-set surprise that breaks "works on my machine" doesn't apply here.

spec-grade

FAQ

Frequently asked questions

Does it handle inline event handlers?

Attributes like onclick="..." are kept as-is. Replace them with onClick={fn} after pasting.

What about boolean attributes?

Attributes like checked and disabled stay as-is; React accepts both the string form and the boolean form.

Are SVG attributes transformed?

Use the SVG to JSX tool for the full SVG-specific rename list (fill-opacity, stroke-linejoin, etc.).

Will it close my divs for me?

No — only HTML void elements self-close. Non-void tags need an explicit closing tag.

Is anything sent to a server?

No. The conversion runs locally in your browser.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!