How to use the HTML to JSX Converter
- 1. Paste HTMLFrom a template, a design tool or an old project.
- 2. Choose optionsWrap it in a named React function component, or just get the JSX.
- 3. Copy the JSXConvert, check the notes and paste it into your .jsx file.
What changes between HTML and JSX
class→className, andfor→htmlFor, because class and for are JavaScript keywords.- Attributes become camelCase: tabindex → tabIndex, maxlength → maxLength, colspan → colSpan. data-* and aria-* stay as they are.
style="margin-top: 10px"becomes an object:style={{ marginTop: "10px" }}.- Every tag must close, so
<br>and<input>become<br />and<input />. - Comments become
{/* … */}, and braces in text are escaped. - Inline handlers like onclick="login()" are removed, because React needs a function, not a string.
Worked example
The sample login card converts to JSX with 5 elements (div, label, input, button and br) and 1 comment kept. Its style becomes {{ marginTop: "10px", backgroundColor: "#fff" }}, the label gets htmlFor="email", the input gets tabIndex="1" and a bare required, and the button's onclick is removed with a note telling you to use onClick={handleLogin}.
With the wrapper ticked, it becomes export default function LoginCard() { return ( … ); }. If your HTML has several top-level elements, they are wrapped in a <>…</> fragment, because a component must return one root. Input value attributes become defaultValue, so the field stays editable without extra state. Always run the result once in your app: unusual attributes from design tools may still need a quick manual fix.
Frequently asked questions
Does it work with SVG?
Yes. SVG attributes like stroke-width become strokeWidth, and viewBox keeps its capital B.
Is the output TypeScript?
It is plain JSX, which also works inside .tsx files.
Why was my onclick removed?
React event handlers must be functions. Write a handler in your component and pass it as onClick={yourFunction}.
Is the html to jsx converter free?
Yes, it is free. Converting your first snippet asks for your name and WhatsApp number once, and after that the html to jsx converter and every other Uncodemy tool open without the form.