Why does style have to become an object instead of a string?

In JSX the `style` prop takes a JavaScript object, not a CSS string — `style={{ marginTop: '8px' }}` not `style="margin-top:8px"`. React applies it via the DOM `element.style` API, which is keyed by camelCased property names, and numeric-friendly values stay strings here for safety. So we split your inline CSS on semicolons, camel-case each property (`background-color` becomes `backgroundColor`), and emit a real object literal. Custom properties like `--brand` are kept verbatim because React passes those through untouched.

Why className instead of class, and htmlFor instead of for?

`class` and `for` are reserved words in JavaScript (class declarations and for-loops), and JSX compiles to JavaScript. React chose the DOM IDL property names instead: `className` maps to `element.className`, `htmlFor` maps to `label.htmlFor`. Most other attributes follow the same DOM-property convention, which is why `tabindex` becomes `tabIndex` and `readonly` becomes `readOnly`. We apply the full mapping React's own JSX warnings would otherwise nag you about.

Can I paste a whole HTML page, doctype and all?

Yes — paste the entire document. We parse it with DOMParser, drop the ` `, and convert everything under ` `, including ` ` and ` `. JSX can't actually render a bare ` `/` ` as a component child in most setups, so when you paste a full page the realistic move is to grab the ` ` contents (or wrap-as-component and delete the parts you don't need). For component-sized snippets it's a clean one-shot.

Does it run or sanitize the HTML I paste?

It parses, it does not execute. We use `DOMParser.parseFromString(..., 'text/html')`, which builds an inert document — scripts don't run, images don't fetch, event handlers never fire. We then walk that tree as data and rebuild a string. We do not strip ` ` tags or dangerous attributes for you, though: if your source HTML has an `onclick` or a ` `, it shows up in the JSX (camel-cased to `onClick`) so you can decide what to keep. Treat the output as code to review, not as sanitized markup.

What about boolean attributes like disabled, checked, or hidden?

HTML boolean attributes are present-or-absent (` `). JSX wants an explicit value, so we emit `disabled={true}` for value-less booleans and keep the string for valued ones (`value="5"`). This keeps the output unambiguous and lint-clean. If you prefer the bare-attribute shorthand React also accepts (` `), it's a one-character delete per attribute.

Migrate a static landing page into a React component

You inherited a hand-written `index.html` and need it as a ` ` component. Pasting it straight into a `.jsx` file fails to compile on the first `class=` and the first inline `style="..."`. Workflow: copy the ` ` markup, paste it here, tick "wrap as component", pick 2-space indent, copy the output. You get `export default function Component() { return (...) }` with every `class` already `className`, every `style` a real object, and void tags self-closed. Drop it in, rename it, and start replacing static text with props instead of fighting the compiler for ten minutes first.

Lift an email or CMS snippet into your design system

Marketing hands you a chunk of HTML from a CMS or an email builder — tables, inline styles, `for` on every label. You want it as a real component so it can take props. Paste it, convert, and the `for="email"` becomes `htmlFor="email"`, the inline `style="padding:12px 16px"` becomes `style={{ padding: '12px 16px' }}`, and the stray HTML comments turn into `{/* */}`. From there you swap hardcoded copy for `{props.heading}` knowing the structure already compiles.

Convert a Bootstrap / Tailwind HTML example to JSX

Component-library docs ship HTML examples (`class="btn btn-primary"`, `aria-*`, `data-*`). Copy the example, paste here, and the class list lands as `className="btn btn-primary"` while `aria-label` and `data-toggle` are kept as-is (React passes hyphenated `aria-`/`data-` attributes through verbatim — we don't camel-case those). It's the fastest path from "I found a snippet" to "it's in my codebase".

Build a quick prototype from a designer's HTML export

A designer exports HTML/CSS from Figma, Webflow, or a no-code tool. The markup is structurally fine but full of `class`, `tabindex`, and inline styles JSX rejects. Convert the whole export in one pass, then split it into components by hand. You skip the tedious find-and-replace pass (`class`→`className`, every style string) that usually eats the first half hour of a prototype.

Teach or document the HTML-to-JSX differences

Onboarding a developer new to React? Paste a small HTML snippet and show them the diff: `class` vs `className`, why `style` is an object, what self-closing means, where comments go. The side-by-side makes the "JSX is not HTML" rules concrete in ten seconds instead of a paragraph of docs. Share the URL (input is in the link) so they can replay it and tweak the input themselves.

HTML to JSX — Paste HTML, Get Clean React JSX

Paste HTML, get React-ready JSX — class becomes className, inline styles become objects, tags self-close. Browser-only.

Runs locally
Category Developer & DevOps
Best for Formatting, validating, shrinking, or inspecting code-adjacent text.

Wrap as component

Indent:

HTML

JSX

Runs entirely in your browser via DOMParser (read-only — nothing executes, nothing uploads). Your input is synced into the URL so a share link reproduces it; copy the output manually for HTML containing secrets.

What this tool does

Free online HTML to JSX converter. Paste raw HTML — a copied marketing page, a Bootstrap snippet, an email template, a chunk from a designer's static mockup — and get back JSX you can drop straight into a React (or Preact / Solid-ish) component without the compiler yelling at you. We rename `class` to `className` and `for` to `htmlFor`, camel-case every attribute React expects in that shape (`tabindex` to `tabIndex`, `maxlength` to `maxLength`, `srcset` to `srcSet`, all the `on*` handlers, SVG attributes too), turn `style="color:red;margin-top:8px"` into a real style object `style={{ color: 'red', marginTop: '8px' }}`, self-close void and empty elements, convert `` into `{/* JSX comments */}`, and drop the `<!DOCTYPE>`. Parsing runs through the browser's native DOMParser in read-only mode — your HTML is never injected into the live page, so a stray inline `<script>` or `onerror` attribute can't execute. Optionally wrap the result in a function component with the indentation you pick. 100% client-side, nothing uploaded, nothing logged.

Tool details

Input: Text + Structured content; The page exposes text boxes, numeric controls, file pickers, or structured inputs depending on the tool.
Output: Live result + Copy + Preview; The result area focuses on usable output, with copy, download, or preview actions when supported.
Privacy: Browser-side processing; The main tool logic does not call an external API, so inputs normally stay in the current tab.
Save / share: Shareable URL state; Key settings are encoded in the URL so another person can reopen the same setup.
Performance budget: Initial JS <= 18 KB; No WASM budget is declared, keeping the tool quick to open on mobile.
Best fit: Developer & DevOps · Developer; Category and role tags drive related tools, internal links, and quick fit checks.

How to use

1. Input

Paste or drop your content into the tool panel.
2. Process

Click the button. All processing is local in your browser.
3. Copy / Download

Copy the result or download to disk in one click.

How HTML to JSX fits into your work

Use it in the small gaps between coding, reviewing, debugging, and shipping.

Developer jobs

Formatting, validating, shrinking, or inspecting code-adjacent text.
Preparing snippets for documentation, tickets, commits, or handoff.
Checking a small payload quickly without switching tools.

Developer checks

Run irreversible transforms like minify or obfuscate on a copy.
Keep secrets out of pasted snippets unless the tool explicitly stays local.
Use your normal tests or linter before shipping transformed code.

Good next steps

These links move the current task into a more complete workflow.

Real-world use cases

Migrate a static landing page into a React component
You inherited a hand-written `index.html` and need it as a `<Landing />` component. Pasting it straight into a `.jsx` file fails to compile on the first `class=` and the first inline `style="..."`. Workflow: copy the `<body>` markup, paste it here, tick "wrap as component", pick 2-space indent, copy the output. You get `export default function Component() { return (...) }` with every `class` already `className`, every `style` a real object, and void tags self-closed. Drop it in, rename it, and start replacing static text with props instead of fighting the compiler for ten minutes first.
Lift an email or CMS snippet into your design system
Marketing hands you a chunk of HTML from a CMS or an email builder — tables, inline styles, `for` on every label. You want it as a real component so it can take props. Paste it, convert, and the `for="email"` becomes `htmlFor="email"`, the inline `style="padding:12px 16px"` becomes `style={{ padding: '12px 16px' }}`, and the stray HTML comments turn into `{/* */}`. From there you swap hardcoded copy for `{props.heading}` knowing the structure already compiles.
Convert a Bootstrap / Tailwind HTML example to JSX
Component-library docs ship HTML examples (`class="btn btn-primary"`, `aria-*`, `data-*`). Copy the example, paste here, and the class list lands as `className="btn btn-primary"` while `aria-label` and `data-toggle` are kept as-is (React passes hyphenated `aria-`/`data-` attributes through verbatim — we don't camel-case those). It's the fastest path from "I found a snippet" to "it's in my codebase".
Build a quick prototype from a designer's HTML export
A designer exports HTML/CSS from Figma, Webflow, or a no-code tool. The markup is structurally fine but full of `class`, `tabindex`, and inline styles JSX rejects. Convert the whole export in one pass, then split it into components by hand. You skip the tedious find-and-replace pass (`class`→`className`, every style string) that usually eats the first half hour of a prototype.
Teach or document the HTML-to-JSX differences
Onboarding a developer new to React? Paste a small HTML snippet and show them the diff: `class` vs `className`, why `style` is an object, what self-closing means, where comments go. The side-by-side makes the "JSX is not HTML" rules concrete in ten seconds instead of a paragraph of docs. Share the URL (input is in the link) so they can replay it and tweak the input themselves.

Common pitfalls

Pasting a full document and expecting to render `<html>` / `<head>` as a component. JSX components return one tree of renderable elements — grab the `<body>` contents instead, or wrap-as-component and delete the document-level wrappers.
Assuming the tool sanitizes for you. It converts, it does not scrub. An `onclick` in your source becomes `onClick` in the output and a `<script>` stays a `<script>`. Review the JSX before shipping it, especially if the HTML came from an untrusted source.
Forgetting that `aria-*` and `data-*` attributes are NOT camel-cased. React keeps them hyphenated (`aria-label`, `data-id`), so we leave them alone on purpose. If you hand-camel-case them you'll break the attribute. Only the React-specific set (`className`, `htmlFor`, `tabIndex`, event handlers, etc.) gets renamed.

Privacy

Conversion is plain JavaScript that runs entirely in your browser tab. Your HTML is parsed with the native DOMParser in an inert document — no network request, no upload, no analytics on what you pasted. The one thing that does travel: your input is synced into the page URL's query string so a "share link" reproduces the same conversion. That's great for collaboration but means anything in the input ends up in browser history and the recipient's server logs. For HTML that contains secrets, tokens, or internal markup you don't want logged, copy the output manually instead of sharing the URL.

FAQ

Tool combos

Folks in your role tend to reach for these alongside this tool.

Developer

Browse all tools for this role

HTML to JSX — Paste HTML, Get Clean React JSX

What this tool does

Tool details

How to use

1. Input

2. Process

3. Copy / Download

How HTML to JSX fits into your work

Developer jobs

Developer checks

Good next steps

Real-world use cases

Migrate a static landing page into a React component

Lift an email or CMS snippet into your design system

Convert a Bootstrap / Tailwind HTML example to JSX

Build a quick prototype from a designer's HTML export

Teach or document the HTML-to-JSX differences

Common pitfalls

Privacy

FAQ

HTML to Markdown

CSS Formatter & Minifier

HTML Minifier

HTML Entities Encoder

JSON to TypeScript Interface

Markdown to HTML

AI Eval Planner

Apache Cheatsheet

API Key Generator

API Rate Limit Cheatsheet

ASCII Table Generator

ASCII Table Reference