Kostenloser HTML-zu-JSX-Konverter

Der HTML-zu-JSX-Konverter ist ein kostenloses Online-Tool, das HTML-Markup in gültige JSX-Syntax zur Verwendung in React-Komponenten umwandelt.

Ja, er ist völlig kostenlos und erfordert keine Registrierung. Die gesamte Konvertierung erfolgt clientseitig in deinem Browser.

Der HTML-zu-JSX-Konverter ändert class in className, wandelt Inline-Styles in Objekte um, schließt leere Elemente selbst und behandelt weitere Unterschiede zwischen HTML und JSX.

Absolut. Der HTML to JSX Converter verarbeitet alles clientseitig in deinem Browser. Es werden keine Daten auf einen Server hochgeladen oder dort gespeichert. Deine Inhalte bleiben jederzeit privat auf deinem Gerät.

Ja, der HTML to JSX Converter ist vollständig responsiv und funktioniert auf Smartphones und Tablets. Du kannst ihn auf jedem Gerät mit einem modernen Webbrowser verwenden, ohne App-Download.

Es ist kein Konto und keine Registrierung erforderlich. Öffne einfach den HTML to JSX Converter in deinem Browser und beginne sofort mit der Nutzung. Es gibt keine Anmeldeschranken oder Nutzungsbeschränkungen.

Gib einfach deine Eingabe in das vorgesehene Feld ein, passe die Einstellungen nach deinen Wünschen an, und das Tool verarbeitet sie sofort. Anschließend kannst du das Ergebnis in die Zwischenablage kopieren oder herunterladen.

Der HTML to JSX Converter funktioniert in allen modernen Browsern, einschließlich Chrome, Firefox, Safari, Edge und Opera. Für das beste Erlebnis verwende die neueste Version deines bevorzugten Browsers.

JSX sieht fast identisch zu HTML aus, ist aber JavaScript-Syntax, die zu React-Elementen kompiliert wird, und folgt daher den Regeln von JavaScript statt denen des Browsers. Die praktischen Unterschiede sind genau die Stellen, an denen kopiertes Markup bricht: Das HTML-Attribut "class" wird zu "className" und "for" wird zu "htmlFor", weil beide Begriffe in JavaScript reserviert sind. Mehrteilige Attribute wie "tabindex" und "maxlength" werden in camelCase zu "tabIndex" und "maxLength", Inline-"style"-Strings werden zu JavaScript-Objekten, und Void-Tags wie "<img>" und "<br>" müssen explizit selbst geschlossen werden. Außerdem erwartet JSX ein einziges Wurzelelement, sodass Geschwister-Tags einen Wrapper oder ein Fragment benötigen. Diese mechanischen Umschreibungen übersieht man von Hand in einer großen Datei leicht. Fügen Sie Ihr HTML oben ein, und der Konverter wendet all diese Regeln sofort an, sodass die Ausgabe direkt in eine React-Komponente passt.

React zeigt diese Warnung, weil "class" ein reserviertes Schlüsselwort in JavaScript ist und JSX zu JavaScript kompiliert wird, nicht zu rohem HTML. Um Konflikte mit der Sprache zu vermeiden, benennt React das Attribut in "className" um, das beim Rendern intern wieder auf das echte "class"-Attribut im DOM abgebildet wird. Dieselbe Logik gilt für "for" bei Label-Elementen, das zu "htmlFor" wird. Fügt man HTML ohne diese Umbenennung direkt in eine Komponente ein, warnt React in der Konsole oder wendet das Styling gar nicht erst an, da es das unbekannte "class"-Prop ignoriert. Jede Instanz manuell über eine lange Vorlage hinweg zu korrigieren, ist mühsam und fehleranfällig. Dieser Konverter benennt "class" automatisch in "className" und "for" in "htmlFor" um — fügen Sie Ihr Markup oben ein, und die Warnungen verschwinden.

In HTML sind Inline-Styles ein einzelner String wie style="margin-top: 10px; font-size: 14px". JSX erwartet stattdessen ein JavaScript-Objekt, dessen Schlüssel camelCase-CSS-Eigenschaften sind und dessen Werte Strings sind, eingeschlossen in doppelte geschweifte Klammern: style={{ marginTop: '10px', fontSize: '14px' }}. Die äußeren Klammern signalisieren JSX, dass ein JavaScript-Ausdruck folgt, die inneren Klammern bilden das eigentliche Objekt. Bindestrich-Namen werden zu camelCase, sodass aus "margin-top" "marginTop" und aus "background-color" "backgroundColor" wird. Diese Umwandlung von Hand ist fehleranfällig, besonders bei vielen Deklarationen oder Vendor-Prefixes. Dieses Tool analysiert jedes Inline-Style und schreibt es automatisch in ein korrektes JSX-Objekt um, camelCased die Eigenschaften und setzt die passenden Anführungszeichen bei den Werten. Fügen Sie Markup mit Style-Attributen oben ein und prüfen Sie die konvertierten Objekte im Ausgabe-Panel.

SVG-Markup, das aus Design-Tools oder Icon-Sets kopiert wird, verwendet Bindestrich-Attributnamen wie fill-rule, stroke-width und clip-path, die in HTML gültig, als JSX-Props aber ungültig sind. Da JSX JavaScript ist, liest sich ein Bindestrich als Minuszeichen, weshalb React diese Attribute erst akzeptiert, wenn sie in camelCase zu fillRule, strokeWidth und clipPath umgewandelt wurden. Dasselbe gilt für viele Filter- und Gradient-Attribute in komplexen SVGs. Fehlt auch nur eines, bricht meist der Build oder das Icon wird leer gerendert, und große Icons können Dutzende solcher Attribute enthalten. Dieser Konverter erkennt SVG-Attribute und camelCased sie automatisch, während Struktur und viewBox erhalten bleiben, sodass das Icon korrekt gerendert wird, sobald Sie es in eine Komponente einfügen. Fügen Sie Ihr SVG oben in das Eingabefeld ein und kopieren Sie das React-taugliche Markup aus der Ausgabe.

Ja. Über die reine Übersetzung von Attributen hinaus kann der Konverter die Ausgabe in eine einsatzbereite Komponente formen, statt nur nacktes Markup zu liefern. Sie können eine reine .jsx-Datei oder eine TypeScript-.tsx-Version ausgeben und das Ergebnis als benannte Funktionskomponente oder Arrow-Function verpacken, inklusive der passenden generierten React-Import-Anweisung. Enthält Ihr Schnipsel mehrere Top-Level-Elemente, gibt die Fragment-Umschließung sie als einen einzigen Knoten zurück, sodass die Komponente ohne zusätzliches div gültig ist. Zusätzlich lassen sich Einrückungsgröße festlegen, einfache oder doppelte Anführungszeichen wählen und wiederkehrende Werte als Props auslagern. Das Ergebnis-Panel bietet außerdem einen zeilenweisen Diff und eine Nebeneinander-Ansicht, um jede Änderung zu überprüfen, sowie einen Bulk-Tab, der mehrere Snippets in einem Durchgang konvertiert. Legen Sie Ihre Ausgabeoptionen oben fest und kopieren oder laden Sie die fertige Komponente herunter.