JSX to HTML Converter

You have a block of JSX, a card or an SVG icon, and you need it as plain HTML for an email, a Handlebars template or a static landing page. Pasting it as is does not work: className is not an attribute and a JSX comment shows up as visible text. This page swaps className for class and htmlFor for for, turns JSX comments into HTML comments, and rewrites everything in camelCase into kebab-case.

That kebab rule is right for SVG and wrong for HTML. In SVG, strokeWidth really does become stroke-width and fillRule becomes fill-rule. HTML attributes, though, are lowercase with no hyphen: tabIndex is tabindex, readOnly is readonly, maxLength is maxlength, and the conversion hands you tab-index, read-only and max-length, which the browser ignores. The swap also applies to the whole text, so onClick becomes on-click and a MyCard component becomes My-card.

Use it on JSX that is basically markup: structure, classes, SVG. Once converted, sweep the output for hyphens that should not be there, delete the expression braces, and drop the event handlers, which have no HTML equivalent. If the component carries logic, a conditional or a map, this page will not help and that part has to be rewritten by hand. Everything happens in the browser, with nothing uploaded.