What does the converter change?

It transforms HTML into valid JSX: 'class=' to 'className=', 'for=' to 'htmlFor=', adds self-closing slashes where needed ( , , ), converts inline styles from string to JSX object syntax (style={{color:'red'}} not style="color: red"), wraps multiple root elements in fragments (<>... ), and escapes curly braces if needed.

How are inline styles converted?

HTML's style="color: red; font-size: 14px" becomes JSX's style={{color: 'red', fontSize: '14px'}}. Note: kebab-case CSS properties (font-size) become camelCase (fontSize), values are wrapped in quotes (since they're JS strings), and the entire object is in double curly braces (one for JSX expression, one for object literal).

Does it handle data-* and aria-* attributes?

Yes. data-* and aria-* attributes are preserved as-is in JSX (they don't need camelCase conversion since they have a hyphen). aria-label, aria-describedby, data-testid all work identically in JSX as in HTML.

What about HTML entities like & and ?

Some entities convert directly; others need JSX expressions. in HTML often becomes {'\u00A0'} in JSX (since isn't a recognized entity in some JSX contexts). The converter handles common entities; rare ones may need manual fixing.

Does it handle event handlers?

HTML event attributes (onclick, onmouseover) are typically just left for you to convert manually since they need to point to React component methods. The converter changes the case to JSX style (onClick, onMouseOver) but the attribute value usually needs reworking to bind to your component's logic.

Will the JSX work as-is in a React component?

Mostly. The output is syntactically valid JSX, but you may need to add it inside a function component (const X = () => (...);), import any custom components referenced, replace event handler strings with function references, and adjust any conditional rendering logic. The converter handles the syntax; integration is your job.

Is the data sent to a server?

No. All conversion happens in your browser. Your HTML never leaves your device — safe for proprietary templates, internal app HTML, or any private markup.

HTML to JSX

Convert HTML to React JSX online instantly. Free HTML to JSX converter that transforms class to className and fixes attributes.

Code Converters Developer Tools

Instant results

HTML Input

JSX Output

JSX output will appear here...

Conversions Applied

Attributes

class → className
for → htmlFor
tabindex → tabIndex
maxlength → maxLength
onclick → onClick

Syntax

Self-closing tags get />
Inline styles become objects
Comments become JSX comments

About HTML to JSX Converter

Convert HTML to React JSX syntax. Handles attribute conversion (class to className), self-closing tags, inline styles to objects, and event handler naming conventions.

How to Use HTML to JSX

Paste your HTML

Paste any HTML markup into the input editor. Components, layouts, fragments, or full pages all work — the converter handles common HTML patterns.

View JSX output

The JSX-compatible version appears instantly: 'class' → 'className', 'for' → 'htmlFor', self-closing tags added, inline styles converted to objects.

Configure options

Choose whether to wrap output in a fragment (<>...</>), how to handle event handlers, and inline style format.

Paste into your component

Click Copy and paste directly into your React component's return statement. May need minor adjustments for event handlers, conditional rendering, or component imports.

When to Use HTML to JSX

Migrating HTML templates to React

When porting an existing HTML template (from a designer, an existing web page, an email template) into a React component, the JSX-syntax differences are tedious to fix manually. The converter handles class→className, for→htmlFor, self-closing tags, and inline style conversion automatically.

Bringing static designs into Next.js apps

Designers often deliver HTML mockups. To integrate into a Next.js or React app, you need JSX. Convert the HTML to JSX, then wrap in a function component, replace static data with props, and add interactivity. The conversion is the boring boilerplate work; converter saves 80% of it.

Converting React Native syntax (similar but different)

React Native uses JSX with HTML-like elements (<View>, <Text>) instead of HTML tags. While not exactly HTML→JSX, the conversion logic is similar (camelCase props, self-closing tags). Use as a starting point, then replace HTML elements with React Native equivalents.

Updating older React code (non-JSX) to modern JSX

Older React used React.createElement() function calls. While modern code uses JSX universally, you may encounter codebases mixing both. Converting the HTML-like markup in createElement calls to actual JSX modernizes the codebase.

HTML to JSX Examples

Basic class→className

Input

<div class="container"><label for="name">Name</label></div>

Output

<div className="container"><label htmlFor="name">Name</label></div>

Two key JSX changes: 'class' is a reserved keyword in JS, so JSX uses 'className'. 'for' is also reserved (used in for loops), so JSX uses 'htmlFor'. The converter applies both substitutions automatically.

Self-closing tags

Input

<br><hr><img src="x.png" alt="X">

Output

<br/><hr/><img src="x.png" alt="X"/>

JSX requires all tags to be closed. Void elements that HTML allows to be unclosed (<br>, <hr>, <img>, <input>, <link>, <meta>) need explicit slashes (<br/>). The converter adds them where needed.

Inline style object syntax

Input

<div style="color: red; font-size: 14px; margin-top: 10px">Hello</div>

Output

<div style={{color: "red", fontSize: "14px", marginTop: "10px"}}>Hello</div>

HTML's CSS string becomes a JS object in JSX. Property names switch from kebab-case (font-size) to camelCase (fontSize). Values are JS strings (quoted). Outer {{ }} = JSX expression containing object literal.

Tips & Best Practices for HTML to JSX

1.After conversion, add React-specific features: state (useState), effects (useEffect), props, event handlers. The JSX gives you the structure; React component logic comes from your code.
2.If your HTML has SVG, the converter handles svg-specific attribute conversion (xmlns:xlink → xmlnsXlink). SVG in JSX has its own quirks; verify the converted SVG renders correctly.
3.Watch for HTML5 boolean attributes: <input disabled> in HTML stays valid in JSX as disabled (no value needed). Some converters change to disabled={true}, which works but is more verbose.
4.Lists from .map() in JSX need 'key' props. The converter doesn't add keys — they require knowing what's unique in your data. Add them manually after conversion.
5.If the HTML has data-* or aria-* attributes, they're preserved as-is (no camelCase conversion since they have hyphens). Custom attributes (data-foo, aria-label) work identically in JSX.
6.For very complex HTML (lots of inline scripts, custom elements, web components), the converter handles structure but you'll need to manually adapt the dynamic behavior. Web components in particular need careful integration with React's lifecycle.

Frequently Asked Questions

JSX is a syntax extension for JavaScript used by React (and similar frameworks). It looks like HTML embedded in your JS code, where you can write component markup using tag-style syntax. JSX requires specific differences from HTML: 'class' becomes 'className', 'for' becomes 'htmlFor', all tags must be closed (br tag with self-closing slash, not bare), inline styles use objects instead of strings.

HTML to JSX

Conversions Applied

Attributes

Syntax

About HTML to JSX Converter

How to Use HTML to JSX

Paste your HTML

View JSX output

Configure options

Paste into your component

When to Use HTML to JSX

Migrating HTML templates to React

Bringing static designs into Next.js apps

Converting React Native syntax (similar but different)

Updating older React code (non-JSX) to modern JSX

HTML to JSX Examples

Basic class→className

Self-closing tags

Inline style object syntax

Tips & Best Practices for HTML to JSX

Frequently Asked Questions

Related Tools

JSON to TypeScript

TOML to JSON Converter

JSON to Python Dataclass

JSON to Rust Struct

Markdown to HTML

HTML to Markdown