So nutzt du: HTML to JSX Converter
- Paste your HTML or SVG markup.
- Read the JSX as it converts — attributes, styles and comments are rewritten for React.
- Optionally wrap it in a named component, then copy it into your project.
What changes from HTML to JSX
classbecomesclassNameandforbecomeshtmlFor.- Inline styles become objects:
style="font-size: 14px"→style={{ fontSize: '14px' }}. - Void elements are self-closed:
<img>→<img />,<br>→<br />. - Event handlers and other attributes use camelCase:
onclick→onClick,tabindex→tabIndex. - SVG attributes are camelCased:
stroke-width→strokeWidth,xlink:href→xlinkHref. - HTML comments become
{/* … */}, and curly braces in text are escaped.
Event handlers
Inline handlers like onclick="doThing()" are strings in HTML but functions in React, so they are converted to a comment-marked placeholder you can replace with a real function reference.
Multiple root elements
A component must return one element. When the HTML has several top-level elements, the converter wraps them in a fragment <>…</>.
Private by design
The conversion runs entirely in your browser — your code is never uploaded, so it’s safe for proprietary projects.
Auch gesucht als: html to jsx, convert html to jsx, html to react, svg to jsx, class to classname, html to react component.
Passende Tools zu: HTML to JSX Converter
- SVG to JSX Converter — Paste an SVG from Figma, Illustrator or an icon set and get a ready-to-use React (JSX or TSX) component — with a safe preview of the icon.
- HTML Formatter — Paste minified or messy markup and get clean, consistently indented HTML — including embedded <style> and <script> blocks.
- CSS to Tailwind Converter — Paste CSS rules or declarations and get the equivalent Tailwind utility classes for each selector — including hover: states and arbitrary values like p-[13px].
- HTML & CSS to Webflow — Paste HTML and its CSS, click Copy to Webflow and paste into the Designer — you get real Div Blocks, Headings, Links, Images and Lists with classes, combo classes, tablet/mobile breakpoints and hover states instead of one big Code Embed.
Häufige Fragen
Why does React need className instead of class?
“class” is a reserved word in JavaScript, and JSX compiles to JavaScript, so React uses the DOM property name className.
Can I convert SVG icons to React components?
Yes. Paste the SVG — attributes like stroke-width and fill-rule are camelCased. For a dedicated SVG workflow with props, use SVG to JSX.
What happens to inline onclick handlers?
They become onClick with a placeholder and a comment, because React expects a function rather than a string of code.
Kann ich HTML to JSX Converter als Web-App installieren und offline nutzen?
Ja. HTML to JSX Converter ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.