HTML to JSX Converter
Convert HTML or SVG into JSX or a React component. Runs in your browser.
About this html to jsx converter
This HTML to JSX converter turns HTML or SVG markup into JSX you can paste into a React component. It renames attributes (class becomes className, for becomes htmlFor, stroke-width becomes strokeWidth), turns style strings into style objects, closes void tags, and escapes characters JSX would choke on.
Paste an SVG icon and it becomes a React component in one step, with optional currentColor fills, removed width and height, and {...props} passed to the root so you can size and color it from outside.
The conversion runs live in your browser. It also explains every change you should double-check, such as inline onclick handlers or a <script> tag, instead of hiding them.
Features
Correct React prop names
Nearly 70 HTML and SVG attributes map to their React names, including tabIndex, maxLength, colSpan, readOnly, autoComplete, crossOrigin and httpEquiv. SVG attributes with dashes or colons become camelCase, so xlink:href becomes xlinkHref.
Style strings to objects
style="padding: 16px; -webkit-box-shadow: none" becomes style={{ padding: "16px", WebkitBoxShadow: "none" }}. Vendor prefixes, custom properties like --gap and unitless values like opacity are handled the way React expects.
SVG to React component
Pick React component and give it a name. For SVG you can switch fills and strokes to currentColor, drop width and height, strip editor metadata from Inkscape or Sketch, and add TypeScript props typed as SVGProps<SVGSVGElement>.
Text that stays valid JSX
Braces in text become {"{"}, stray > becomes >, comments become {/* */}, and spaces next to inline tags are kept with {" "} where JSX would otherwise drop them. <pre> keeps its exact whitespace in a template literal.
Forms that do not warn
value and checked on inputs become defaultValue and defaultChecked, so React does not warn about a controlled input without onChange. <textarea> content moves into defaultValue. You can switch this off.
Notes on what to review
Inline event handlers become arrow functions with a note. Framework attributes like @click or v-if are dropped and listed. A <script> becomes dangerouslySetInnerHTML with a warning that it will not run the way it did in a static page.
How to use the html to jsx converter
- 1Paste HTML or SVG, or load a sample.
- 2Choose JSX only or a React component, and tick the SVG options you want.
- 3Copy the JSX or download it as a .jsx or .tsx file, then review the notes.
When to use it
Moving a template into React
Paste a section of a landing page or an email layout and get JSX you can drop into a component, then replace the hard-coded text with props.
Making an icon component
Copy an SVG from your design tool, tick currentColor and Remove width and height, and the icon now follows the text color and CSS size of its parent. Shrink the path data first with the SVG Optimizer if it came from an editor.
Converting a snippet from documentation
UI library docs often show plain HTML. Convert it, paste it, and skip the round of className errors in the console.
Prototyping in a playground
Sketch the layout in the HTML Playground where you can see it render, then convert the finished markup here.
What is the difference between HTML and JSX?
JSX looks like HTML but compiles to JavaScript function calls, so it follows JavaScript rules. The changes that trip people up most often:
- class and for are reserved words in JavaScript, so React uses className and htmlFor.
- Attributes are camelCase: tabindex becomes tabIndex, onclick becomes onClick, stroke-width becomes strokeWidth. data-* and aria-* stay as they are.
- style takes an object, not a string: style={{ marginTop: "8px" }}.
- Every tag must close. <br> and <img> become <br /> and <img />.
- Curly braces start a JavaScript expression, so a literal { in text must be written {"{"}.
- A component returns one root. Several top-level elements are wrapped in a fragment, <>…</>.
How do I convert an SVG into a React component?
Paste the SVG and choose React component. The XML declaration, DOCTYPE and editor namespaces are removed, attributes are camelCased, and the markup is wrapped in a function that returns it. With Pass {...props} on, you can write <BellIcon className="size-5 text-red-600" aria-label="Alerts" /> and the props land on the <svg>.
Tick Colors → currentColor for single-color icons so they inherit the surrounding text color. Leave it off for multi-color illustrations. Removing width and height lets CSS set the size while viewBox keeps the proportions.
Why does React want defaultValue instead of value?
In React, an input with a value prop is controlled: React owns the value and expects an onChange handler to update it. Without one, the field is stuck and React logs a warning. Static HTML forms usually mean a starting value instead, which React calls defaultValue (and defaultChecked for checkboxes).
If you plan to wire the form to state, untick the option and add your own onChange handlers.
Why use Mavros
| Mavros | Typical upload sites | |
|---|---|---|
| SVG handling | camelCase attributes, currentColor, props, metadata cleanup | Attribute renames only |
| Style attribute | Object with vendor prefixes and unitless numbers | Often left as a string, which React rejects |
| Whitespace | Keeps spaces next to inline tags with {" "} | Spaces silently lost |
| Review notes | Lists dropped attributes, handlers and scripts | Silent |
| Where your markup goes | Stays in your browser | Often posted to a server |
Tips
- Paste a whole HTML page and the converter takes what is inside <body>, since a React component renders into an existing page.
- Table rows placed straight inside <table> work in HTML, but React warns about them. Wrap them in <tbody>; the notes remind you.
- To check the output, paste it into the Code Beautifier (Prettier Online) with JSX or TSX selected. If Prettier formats it, the syntax is valid.
- Going the other way, from HTML to readable text for docs, the HTML to Markdown converter does that job.
Questions
How do I convert HTML to JSX?
Paste the HTML into the left box and the JSX appears on the right as you type. Choose JSX only to copy markup, or React component to get a complete function you can save as a .jsx or .tsx file.
Why does React use className instead of class?
Because class is a reserved word in JavaScript, and JSX compiles to JavaScript. React maps className to the HTML class attribute. The same applies to htmlFor for the for attribute on labels.
How do I write inline styles in JSX?
Pass an object with camelCased property names, such as style={{ backgroundColor: "#fff", marginTop: 8 }}. Numbers get px added for most properties. This converter builds the object from your style string.
Can I convert SVG to a React component with TypeScript?
Yes. Choose React component and tick TypeScript. The output imports the SVGProps type from React and types the props as SVGProps<SVGSVGElement>, so every SVG attribute is checked.
What happens to onclick and other inline handlers?
They become React handlers such as onClick={() => { track('signup') }}. The code inside is kept as written, so make sure the functions it calls exist in your component.
Does it work with Vue or Angular templates?
Partly. Plain HTML parts convert, but framework syntax like @click, v-if, :prop or [prop] cannot be expressed in JSX, so those attributes are dropped and listed in the notes.
Is the output always valid JSX?
It is built to be. Tags are closed, braces and angle brackets in text are escaped, and invalid attribute names are dropped with a note. Run it through a formatter if you want to be sure.
Is my HTML uploaded?
No. Parsing and conversion run in your browser tab, and the address bar keeps only your option choices.