Comment utiliser : 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.
Aussi recherché comme : html to jsx, convert html to jsx, html to react, svg to jsx, class to classname, html to react component.
Outils complémentaires : 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.
Questions fréquentes
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.
Puis-je installer HTML to JSX Converter en tant qu’application web et l’utiliser hors ligne ?
Oui. HTML to JSX Converter est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.