HTML → JSX Konverter
Datenschutz by Design — läuft vollständig in Ihrem Browser
HTML links einfügen, rechts den React-fertigen JSX kopieren. Der Konverter schreibt class zu className, for zu htmlFor, Inline-Style-Strings zu camelCase-Objekten und schließt Void-Elemente wie img und input selbst, damit JSX sie parsen kann.
Attribut- und Event-Mapping
React nutzt die DOM-Property-Namen statt der HTML-Attribute: tabindex wird tabIndex, readonly wird readOnly, colspan wird colSpan. Inline-Handler heißen statt onclick nun onClick, statt onmouseover nun onMouseOver — und so für jeden Standard-Handler. Die beiden HTML-spezifischen Umbenennungen sind class zu className und for zu htmlFor, weil beide reservierte Wörter in JavaScript sind.
Style-Strings zu camelCase-Objekten
JSX erwartet Inline-Styles als Objektliteral, jede CSS-Eigenschaft camelCased. Aus padding: 1rem; background-color: #fff wird style={{ padding: '1rem', backgroundColor: '#fff' }}. Der Konverter beherrscht Kebab-Case zu camelCase, Vendor-Prefixe (-webkit-, -moz-, -ms-) und CSS Custom Properties (--brand-color bleibt erhalten, bei Bedarf als String-Schlüssel).
Datenschutz und Sonderfälle
Die Umwandlung läuft in einer einzigen JavaScript-Funktion in diesem Tab. Ihr HTML verlässt den Browser nicht — relevant, wenn Sie Markup mit Kundendaten portieren. Die 14 Void-Elemente (img, input, br, hr, meta, link, area, base, col, embed, source, track, wbr, param) werden im Output selbstschließend. data- und aria-Attribute bleiben unverändert, da sie in JSX direkt gültig sind.
Häufig gestellte Fragen
- Welche Attribute werden umbenannt?
- class zu className, for zu htmlFor, tabindex zu tabIndex, readonly zu readOnly, colspan zu colSpan, plus camelCase für alle Standard-DOM-Properties und on*-Handler.
- Wie wird der Style-String konvertiert?
- Er wird an Semikolons gesplittet, jede CSS-Property camelCased und das Ganze als JSX-Objekt mit doppelten Klammern ausgegeben. Vendor-Prefixe und Custom Properties bleiben erhalten.
- Ändern sich data-* und aria-*?
- Nein. JSX akzeptiert beide in Kebab-Form, der Konverter lässt sie unangetastet. Nur Standard-DOM-Attribute werden umbenannt.
- Werden HTML-Kommentare umgewandelt?
- Ja. <!-- Kommentar --> wird zu {/* Kommentar */}, damit die Absicht erhalten bleibt, ohne den Parser zu sprengen.
- Und Skripte sowie Inline-Handler?
- Der Konverter benennt onclick zu onClick und andere Handler um, der Funktionskörper bleibt aber als String. Üblicherweise schreiben Sie ihn vor dem Release als echten React-Callback.
- Wird mein HTML irgendwohin hochgeladen?
- Nein. Die Umwandlung passiert komplett in diesem Browser-Tab. Toova sieht nichts von dem, was Sie einfügen — keine Analytics, keine Logs, nichts.