Конвертируйте HTML в JSX (React)
Tool guide
A block of markup lifted from a mockup, an email template or someone else's theme will not drop into React unchanged: JSX wants className instead of class, htmlFor instead of for, and an object rather than a string in style. Doing that by hand is slow and typo-prone. Paste the markup into HTML Input, press Convert, and JSX Output holds the same fragment with the attributes fixed, ready to sit inside your component's return. It all runs in the browser. See also: turn JSX back into plain markup, keep only the text from the markup, escape special characters in the markup.
Three things: class becomes className, for becomes htmlFor, and the style string is parsed into an object with camelCase keys, so background-color turns into backgroundColor. Every other attribute is copied verbatim, which means tabindex, colspan and onclick still need manual fixes to tabIndex, colSpan and onClick.
The converter does not add the closing slash. HTML treats br, img, input and hr as void elements, but JSX insists on . Search the output and add the space-slash yourself — usually two or three edits per fragment.
You can, but it will not help: a component cannot carry a doctype, html, head or raw script tags. Paste only the block you need — a section, a card, a form. Remember too that JSX allows a single root, so wrap sibling elements in a div or a … fragment.
Comment conversion is not something to rely on here, and JSX does not understand syntax. Strip comments from the fragment before converting, or rewrite the ones worth keeping as {/* text */} directly in the finished component.
No — className and htmlFor are React conventions. Vue and Angular templates use ordinary class attributes, so the converted fragment would actively get in the way. For those frameworks keep the original HTML and only change the data bindings.
It does not. The replacements run in JavaScript on the page itself and no request carries your markup anywhere; it lives only until you reload. Even so, scrubbing private keys or internal URLs out of a snippet before pasting it anywhere is a habit worth keeping.
Before: Text
After: Text
Before: Email
After: Email
Your rating and feedback help decide what to improve next.
