Global Araç
Html To Jsx
Paste raw HTML and get valid JSX in return. The converter handles every reserved-word rename React requires —class becomes className,for becomes htmlFor,tabindex becomes tabIndex — plus camelCases all the on-* event handlers (onclick →onClick) and re-formats inline styles from a CSS string into a JS object literal.
Self-closing tags get fixed: <img>, <br>, <hr>, <input> all become explicitly self-closed (<img />) so the JSX parser is happy. HTML comments (<!-- ... -->) become JSX comments {/* ... */}. boolean attributes that React expects to be JS booleans (checked, disabled, readonly) are wrapped in braces.
Use this when you've copied a snippet from a design tool, a CodePen, an old jQuery plugin, or any non-React project and need it to compile inside a .tsx file without chasing 30 individual rename errors.
Nasıl Kullanılır
- Paste the HTML snippet into the input box.
- The JSX output regenerates live — no convert button needed.
- Click Copy to grab the JSX, then paste into your React component's return statement.
- Wrap multiple top-level elements in a fragment (<>...</>) since JSX requires a single root node.
- If you see escaped braces ({` and `}) in your output, your input had literal curly braces — wrap them in {''} to keep them as text.
Ne Zaman Kullanılır
- Migrating an old static site or jQuery template into React/Next.js.
- Pasting design-tool exports (Figma to code, Webflow exports) into a component.
- Converting Bootstrap/Tailwind HTML examples from documentation into JSX.
- Onboarding designers/non-React devs whose first instinct is to write plain HTML.
Ne Zaman Kullanılmaz
- Templating engines with custom syntax (Vue, Svelte, Handlebars) — those need their own converters.
- Server components with directives like "use client" — convert the markup here, but you still need to wire up the React-specific bits manually.
- Anything with <script> tags — React refuses to render <script> directly; use next/script or similar instead.
Örnek
<input type="checkbox" class="check" checked tabindex="0" onclick="doStuff()">
<input type="checkbox" className="check" checked={true} tabIndex={0} onClick={doStuff} />All four React conventions applied in one line: className, boolean wrap, camelCased tabIndex/onClick, and explicit self-close.
Sık Sorulan Sorular
Why does React rename `class` to `className`?
`class` is a reserved word in JavaScript (used for class declarations). React JSX is JavaScript, so the JSX-to-JS compiler needs a non-reserved alternative. `className` matches the DOM API name (`element.className` is how you read/set it in vanilla JS).
What about CSS-in-JS — does this convert <style> tags too?
Inline styles on individual elements (style="color: red; padding: 4px") get converted to JS objects ({color: 'red', padding: 4}). Standalone <style> tags are left alone — React renders them but it's usually better to extract them into a CSS module or styled-component.
Does it handle data-* attributes?
Yes. data-* and aria-* attributes pass through unchanged because React explicitly preserves them as-is (they're the only HTML-style hyphenated attributes JSX accepts).
Why are my event handlers wrapped as strings instead of function references?
If your input was `onclick="doStuff()"` (a string of code), the converter outputs `onClick={() => doStuff()}` to make it a callable. If you want a direct reference, change it to `onClick={doStuff}` after pasting — there's no way to know from raw HTML whether the function is in scope.
Will this convert Vue/Angular templates?
No — those have their own directive syntax (`v-if`, `*ngIf`, `:class`) that this converter doesn't recognize. Strip the framework directives first, leaving plain HTML, then run it through here.