So nutzt du: HTML zu JSX Konverter
- Füge dein HTML- oder SVG-Markup ein.
- Sieh dir das JSX während der Umwandlung an – Attribute, Styles und Kommentare werden für React umgeschrieben.
- Packe es optional in eine benannte Komponente und kopiere es dann in dein Projekt.
Was sich beim Wechsel von HTML zu JSX ändert
classwird zuclassName, undforwird zuhtmlFor.- Inline-Styles werden zu Objekten:
style="font-size: 14px"→style={{ fontSize: '14px' }}. - Void-Elemente werden selbstschließend:
<img>→<img />,<br>→<br />. - Event-Handler und andere Attribute werden in camelCase geschrieben:
onclick→onClick,tabindex→tabIndex. - SVG-Attribute werden in camelCase umgewandelt:
stroke-width→strokeWidth,xlink:href→xlinkHref. - HTML-Kommentare werden zu
{/* … */}, und geschweifte Klammern im Text werden escaped.
Event-Handler
Inline-Handler wie onclick="doThing()" sind in HTML Strings, in React dagegen Funktionen. Deshalb werden sie in einen kommentierten Platzhalter umgewandelt, den du durch eine echte Funktionsreferenz ersetzen kannst.
Mehrere Root-Elemente
Eine Komponente muss genau ein Element zurückgeben. Wenn das HTML mehrere oberste Elemente hat, packt der Konverter sie in ein Fragment <>…</>.
Privat by design
Die Umwandlung läuft komplett in deinem Browser – dein Code wird nie hochgeladen, daher ist sie auch für proprietäre Projekte unbedenklich.
Auch gesucht als: html zu jsx, html in jsx umwandeln, html zu react, html to jsx converter, svg zu jsx, class zu classname, html zu react komponente.
Passende Tools zu: HTML zu JSX Konverter
- SVG zu JSX Konverter — Füge ein SVG aus Figma, Illustrator oder einem Icon-Set ein und erhalte eine fertige React-Komponente (JSX oder TSX) mit einer sicheren Vorschau des Icons.
- HTML Formatter — Füg minifiziertes oder unübersichtliches Markup ein und erhalte sauber und einheitlich eingerücktes HTML – inklusive eingebetteter <style>- und <script>-Blöcke.
- CSS zu Tailwind Converter — Füge CSS-Regeln oder Deklarationen ein und erhalte für jeden Selektor die passenden Tailwind-Utility-Klassen, inklusive hover:-Zuständen und beliebigen Werten wie p-[13px].
- HTML & CSS zu Webflow — Füge HTML und das passende CSS ein, klicke auf Copy to Webflow und füge im Designer ein.
Häufige Fragen
Warum braucht React className statt class?
„class“ ist ein reserviertes Wort in JavaScript, und JSX wird zu JavaScript kompiliert. Deshalb verwendet React den DOM-Eigenschaftsnamen className.
Kann ich SVG-Icons in React-Komponenten umwandeln?
Ja. Füge das SVG ein – Attribute wie stroke-width und fill-rule werden in camelCase umgewandelt. Für einen eigenen SVG-Workflow mit Props nutze SVG to JSX.
Was passiert mit Inline-onclick-Handlern?
Sie werden zu onClick mit einem Platzhalter und einem Kommentar, weil React eine Funktion statt eines Code-Strings erwartet.
Kann ich HTML zu JSX Konverter als Web-App installieren und offline nutzen?
Ja. HTML zu JSX Konverter 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.