Everything runs on your machine — your file is processed right here in your browser and never uploaded to any server.
Input
HTML
Loading...
Output
JSX
Loading...

About this tool

HTML pasted directly into a React component breaks in familiar ways: class is a reserved word, unclosed tags throw errors, and inline style strings are rejected outright. This converter translates raw HTML into valid JSX, applying React's attribute and syntax rules automatically so the markup renders instead of crashing your build.

React developers use it when porting static landing pages or email templates into components, and when embedding SVG icons whose markup uses attributes JSX will not accept as-is. Markup handed over by a designer or exported from a CMS becomes component-ready in one paste.

How to use

  1. Paste the HTML into the left editor, or click Load File to open an .html file from your computer.
  2. The JSX version is written live in the right editor, updating continuously as you modify the markup.
  3. Look over the converted attributes and self-closed tags to make sure the structure matches your component plan.
  4. Use Copy to insert the JSX into your component, or Download if you want it saved as a file.
  5. Hit Clear to empty both editors when you are ready for the next snippet.

The translation from HTML to JSX is done by code executing in your own browser session. Nothing is uploaded or shared, so proprietary templates and unreleased page designs remain private while you convert them.

Frequently asked questions

What does the converter actually change?

It renames attributes to React's camelCase forms — class becomes className, for becomes htmlFor, onclick becomes onClick — closes void elements like img and br with a slash, and rewrites markup so it parses as valid JSX.

What happens to inline style attributes?

CSS strings are converted into JavaScript style objects: property names become camelCase keys and values become strings, wrapped in the double-brace syntax React expects. A rule like background-color turns into backgroundColor.

Are HTML comments preserved?

Yes, but in JSX form. Standard HTML comments are rewritten using JSX's curly-brace comment syntax, since the HTML style is not valid inside a component's return value.