Does this send my markup anywhere?

No. Conversion runs entirely in your browser using a hand-written HTML tokenizer, not a browser DOM parser.

Does it convert every HTML attribute to camelCase?

It converts class, for, and the common single-word and hyphenated HTML/SVG attributes JSX camelCases (tabindex, stroke-width, and similar). data-* and aria-* attributes are left exactly as written, matching how React treats them.

What happens to inline style attributes?

A style="color: red; font-size: 12px" string becomes a JSX style object: style={{ color: "red", fontSize: "12px" }}, with each CSS property camelCased and each value kept as a string.

Does it use a real HTML parser?

No. It's a hand-written tokenizer/regex-based parser built to have no DOM globals at module scope, so it runs the same in a build script as in a browser. It covers well-formed HTML; it isn't a full HTML5 parser.

HTML to JSX Converter - Convert HTML to JSX Online

Overview

Introduction

Copying markup from a static page, a design handoff, or an email template into a React component means renaming class, converting inline styles, and closing void tags by hand.

This tool automates that conversion, rewriting pasted HTML into JSX entirely in your browser.

What Is HTML to JSX Converter?

A hand-written HTML tokenizer that walks tags, attributes, and text nodes with a regex-based state machine rather than the browser's DOM parser, so it has no DOM globals at module scope and behaves the same anywhere it runs.

It rewrites class to className, for to htmlFor, camelCases the common kebab-case HTML/SVG attributes, self-closes void elements, converts inline style strings to style objects, and turns HTML comments into JSX comments.

How HTML to JSX Converter Works

HTML comments are converted first, then tags are matched one at a time: closing tags pass through unchanged, and opening tags have their attributes re-written individually before the tag is re-assembled, self-closing it if it's a void element or was already self-closed.

Each attribute is looked up in an explicit HTML-to-JSX name table first (for names a generic conversion would get wrong, like tabindex), then falls back to a generic kebab-case-to-camelCase conversion for any other hyphenated attribute, skipping data-*/aria-* entirely.

When To Use HTML to JSX Converter

Use it when porting a static HTML snippet, a design tool's HTML export, or an email template's markup into a React component.

It's also handy when pairing with an LLM that outputs plain HTML but you need JSX-safe attribute names and self-closing tags.

Often used alongside JSX to HTML Converter, HTML Formatter and HTML Validator.

Features

Advantages

Runs entirely client-side.
Covers the attribute-naming differences that are easy to miss by hand: class/for, tabindex/readonly-style single-word attributes, and hyphenated SVG attributes.
Converts inline style strings to style objects instead of leaving them as invalid JSX.

Limitations

This is a hand-written tokenizer for well-formed HTML, not a full HTML5 parser; deeply malformed markup (unclosed tags, invalid nesting) may convert incorrectly.
It doesn't decode HTML entities or evaluate anything; literal curly braces in text content aren't escaped for JSX, so text containing { or } may need a manual fix after conversion.

Examples

class, style, and a void element

Input

<div class="card" style="color: red; font-size: 12px">
  <img src="a.png">
</div>

Output

<div className="card" style={{ color: "red", fontSize: "12px" }}>
  <img src="a.png" />
</div>

class becomes className, the inline style string becomes a style object, and the void <img> tag self-closes.

Best Practices & Notes

Best Practices

Review attributes on custom elements or web components after conversion; the generic kebab-to-camel fallback assumes standard HTML/SVG naming.
Run the JSX to HTML Converter afterward if you need to check the round trip, especially for style objects.
Escape any literal { or } left in text content manually, since JSX treats them as expression delimiters.

Developer Notes

Built on a regex-based tag/attribute tokenizer with no DOM API usage, sharing its HTML<->JSX attribute name table with the JSX to HTML Converter so both tools stay in sync.

HTML to JSX Converter Use Cases

Porting a static HTML snippet into a React component
Converting a design tool's HTML export to JSX
Cleaning up plain-HTML output from an LLM before pasting it into a component

Common Mistakes

Assuming data-* or aria-* attributes get camelCased; React keeps those exactly as written, and so does this converter.
Forgetting that text containing literal { or } needs manual escaping after conversion, since this tool doesn't evaluate or escape JSX expressions.

Tips

If a custom attribute doesn't convert the way you expect, check whether it needs a manual rename; the generic fallback only handles standard kebab-case naming.
For a large page, convert it section by section so any manual fixes stay easy to review.

HTML to JSX Converter