Softonic

HTML to JSX Converter

Step 1 / 2

Converts: class to className, for to htmlFor, inline styles to JSX objects, self-closes void tags, removes HTML comments.

Convert to JSX

JSX looks like HTML until it is not, class is className, for is htmlFor, style is an object not a string, and every void tag must self-close. Paste HTML and this converter produces JSX that compiles on first try, so you can lift a marketing page into a React component without spending the next ten minutes chasing compiler errors.

How to convert HTML to JSX

  1. 1

    Paste HTML

    A component's worth of markup, or a full page fragment.

  2. 2

    Convert

    The tool renames `class`, `for`, `readonly` and other attributes to their JSX casing and turns inline styles into objects.

  3. 3

    Review the JSX

    The output is ready to paste into a `.jsx` or `.tsx` file.

  4. 4

    Copy and drop in

    The code uses single-line expressions so it fits well inside an existing component.

Every HTML-to-JSX difference that matters

JSX is not HTML. It is a JavaScript expression that compiles to React.createElement() calls, so attribute names follow JavaScript conventions.

The converter handles the most common renames automatically. The full list below is the reference you need when you hand-write JSX.

Attribute renames

HTML JSX Notes
class className class is reserved in JS
for htmlFor for is reserved
tabindex tabIndex camelCase
readonly readOnly camelCase
contenteditable contentEditable camelCase
stroke-width (SVG) strokeWidth camelCase
xlink:href xlinkHref Colon namespaces flattened
aria-label aria-label ARIA keeps hyphens
data-* data-* Data attributes keep hyphens

Style attribute

HTML: style="color: red; padding: 10px"

JSX: style={{ color: 'red', padding: 10 }}

Numeric values without units become pixels; keep strings for percentages and unitless values like flex.

Self-closing void elements

HTML tolerates <br> and <input> without a closing tag. JSX requires <br /> and <input />, every element must be explicitly closed.

Comments

HTML comments (<!-- -->) are not valid in JSX bodies. This converter strips them; if you need to keep a note, write it as {/* JavaScript block comment */} yourself.

Boolean attributes

HTML: <input checked> (or <input checked="checked">)

JSX: <input checked={true} /> or simply <input checked />. Never pass a string “true”.

Escape hatches

  • Untrusted HTML snippets can be rendered with dangerouslySetInnerHTML={{ __html: ... }}, intentionally ugly to discourage use.
  • Custom data-* attributes stay as-is; non-standard attributes are passed through but may trigger React warnings in dev mode.

Frequently Asked Questions

SVG attributes like stroke-width must be camelCased (strokeWidth) in JSX, and every tag must self-close. The converter self-closes void tags inside SVG and camelCases property names in style strings, but it does not rename SVG attributes; change stroke-width to strokeWidth by hand. For one-off icons, the cleanest approach is to save the icon as an SVG file and import it as a component via svgr.

Yes, both JSX and TSX use className. The only exception is inside dangerouslySetInnerHTML, where the raw HTML string keeps class because it is inserted as-is into the DOM.

No. The output is the JSX fragment only, with no export default function wrapper and no type annotations. Paste it into your .jsx or .tsx file and add the props, types and wrapper yourself. class is still converted to className, which is exactly what TSX expects.

They pass through unchanged. The converter does not rename event handlers, so change onclick to onClick and replace the string body with a real function, for example onClick={() => doThing()}. You will need to define doThing in your component scope.

Related Tools

ASCII Table Reference

Full ASCII table from 0 to 127 with decimal, hex, octal, binary, standard names and HTML numeric-reference notation, including NUL, LF and DEL.

Color Palette Generator

Generate monochromatic, analogous, complementary, triadic or tetradic color palettes from a base HEX color and export copy-ready CSS variables.

HTML Character Reference

Searchable list of HTML entities, their named and numeric codes, and a one-click copy for special characters and symbols.

FPS Counter

Measure browser FPS with requestAnimationFrame, smoothing, min/max frame rate, warnings and an optional graph. Runs locally with no upload or API.

HEX Color Picker

Pick or enter a HEX colour and get RGB, HSL, approximate CMYK, relative luminance and contrast ratios against white and black.

JSON Formatter

Paste JSON to pretty-print with 2 or 4 spaces, minify it to compact output, or run a quick syntax check before copying the result.

Tool available in other languages