Over deze tool
De converter HTML naar JSX / React parseert een HTML-snippet met de native DOMParser van de browser en serialiseert deze opnieuw als geldige JSX, waarbij alles wordt gefixt wat React nodig heeft. Het draait volledig client-side, dus de markup die je plakt blijft op je machine. Plak willekeurige HTML — een design-export, een e-mailtemplate, een componentschets — en krijg JSX die je direct in een React-bestand kunt plaatsen.
De herschrijving hernoemt gereserveerde attributen (class wordt className, for wordt htmlFor), zet de rest in camelCase — tabindex naar tabIndex, maxlength naar maxLength, stroke-width naar strokeWidth — terwijl data-* en aria-*-attributen ongemoeid blijven. Void-elementen zoals img, br, input en hr worden self-closing gemaakt (<img />), HTML-commentaren worden {/* ... */}, letterlijke accolades in tekst worden geëscaped als {'{'}, en een inline style="a:b;c:d"-string wordt omgezet naar een style={{ a: 'b', c: 'd' }}-object met CSS-sleutels in camelCase. Booleaanse attributen zoals disabled kunnen kaal of als ={true} worden geproduceerd met een schakelaar.
Kies fragment-uitvoer — meerdere root-knopen worden automatisch in een <>...</>-fragment gewikkeld — of volledige-component-uitvoer, die de JSX in een export default function wikkelt met de naam en inspringing van je keuze (2 spaties, 4 spaties, of tabs). Het resultaat is klaar om te plakken; omdat het parsen een echte DOM gebruikt, wordt misvormde nesting op dezelfde manier genormaliseerd als een browser dat zou doen.