HTML to JSX Converter

How to use the html to jsx converter

1. Paste your HTML markup into the input area.
2. The converter automatically transforms the HTML to JSX as you type.
3. Review the output to ensure attributes like class became className.
4. Copy the resulting JSX directly into your React component file.

What changes when converting HTML to JSX

JSX looks like HTML but follows JavaScript rules, so several syntax adjustments are required when you convert html to jsx. The most common change is renaming class to className and for to htmlFor, because class and for are reserved words in JavaScript.

Void elements such as <br>, <img>, <hr>, <input>, <meta> and <link> must be explicitly self-closed with a trailing slash: <br />. Boolean attributes like disabled or readonly need an explicit value in JSX, typically written as disabled={true}.

Several top-level elements are wrapped in a fragment (<>...</>) because a JSX expression needs one root, <script> and <style> text and multi-line <pre> text become template literals so braces and angle brackets survive, and tags with optional end tags (li, p, td and similar) or missing end tags are closed for you. Upper-case HTML tag names are lower-cased so JSX does not treat them as components. Inline event handler attributes such as onclick="alert(1)" are only renamed to onClick: React expects a function there, so rewrite those by hand. Inline styles also change format. In HTML, the style attribute takes a CSS string. In JSX, it expects a JavaScript object where property names use camelCase and values are strings or numbers. For example, style="font-size: 14px;" becomes style={{fontSize: '14px'}}.

Common attribute conversions

This table lists the HTML attributes that require renaming when you convert them for React components.

Handling SVG attributes

SVG elements have their own set of attribute naming rules. Many SVG attributes use hyphens in standard XML, but React requires camelCase versions. When you run an html to jsx conversion on SVG markup, attributes like fill-rule become fillRule, stroke-width becomes strokeWidth, and clip-path becomes clipPath.

The viewBox attribute is a notable exception: it retains its mixed-case spelling exactly as written in the SVG specification. Other attributes like xlink:href are converted to xlinkHref. Failing to rename these will cause React to log warnings in the console and may result in the SVG rendering incorrectly.

Comments and doctypes

Standard HTML comments use the <!-- --> syntax, which is invalid inside JSX expressions. This converter replaces them with {/* */}, the correct JSX comment format. If you are placing comments inside a block of text, they must be wrapped in curly braces to form a valid expression.

The <!DOCTYPE html> declaration is specific to HTML documents and has no meaning in a React component tree. It is stripped out entirely during the conversion process. Similarly, CDATA sections found in raw XML or SVG are converted into standard JSX comments since React does not support CDATA blocks.

If you need to strip markup completely rather than convert it, a dedicated html tag remover might be more appropriate. For extracting plain text from markup, consider using an html to text tool instead.

Why manual conversion is error-prone

Converting small snippets by hand is manageable, but larger templates quickly introduce mistakes. Missing a single class to className swap will throw a warning, and forgetting to self-close an <img> tag causes a hard syntax error that prevents the component from compiling.

Inline styles are particularly tricky to convert manually. You must parse the CSS string, split it by semicolons, separate properties from values, convert kebab-case properties to camelCase, wrap numeric-looking values with units in quotes, and assemble the final JavaScript object. Automating this step saves significant debugging time.

Worked examples