HTML to JSX

Paste HTML and get JSX React accepts: class becomes className, inline styles become objects, comments and void elements are handled.

html
JSXtsx
The result appears here
Made something you like?Or start from a finished block

Questions

Which attributes change?+

class, for, tabindex and the rest of React's renamed set, plus every hyphenated attribute except data-* and aria-*, which keep their dashes. Bare boolean attributes such as disabled are written as JSX booleans.

What happens to inline styles?+

A style attribute becomes a style object with camelCased properties and string values, which is the only form React accepts. Custom properties keep their double dash and stay quoted.

Why does my markup come out restructured?+

Because it is parsed by the browser rather than by a pattern, so implied tags are filled in and misplaced ones are moved exactly as they would be on a real page. What you see is what the markup actually means.

Related tools

SVG to JSX componentTurn an SVG into a typed React component that forwards props, with hard-coded fills swapped for currentColor so the icon takes the text color.CSS to JS objectConvert CSS rules or a bare declaration list into JavaScript style objects, camelCased and quoted, ready for a style prop or a CSS-in-JS file.CSV to JSONRead a CSV into JSON records, including quoted fields holding separators or line breaks, with numbers and booleans converted or kept as text.

The tools are free. So is most of the library.

1935 blocks and 989 pieces for shadcn/ui and Tailwind, built on the same tokens these tools write. Install one with a command and the code is yours.

Browse the blocks

No signup for the tools. MIT for free blocks, commercial licence for Pro.

Markdown version