HTML to JSX Converter

Convert HTML markup into React JSX with renamed attributes and a style object.

Load Sample:
Name:

About HTML to JSX

JSX looks like HTML, but it is JavaScript. Some attributes have a different name, and every tag must close. This tool makes those changes. It renames class to className, for to htmlFor, and tabindex to tabIndex. It turns an inline style into an object with camelCase keys. It adds a closing slash to a void tag such as img or br. It turns an HTML comment into a JSX comment.

Turn on Wrap in component function to get a complete function component with the name that you enter. Turn it off to get only the markup, so you can paste it into an existing component.

Paste markup from a design export, a CMS, or an old template. Check the result. An inline event handler such as onclick needs a real function in your code.

Every conversion runs in your browser. To convert an SVG icon, use the SVG to React Component tool, which turns on the props spread for you.