ToolBox.Online

HTML to JSX Converter - Free Online Tool

Convert HTML to JSX online for free. Automatically transforms class to className, style strings to objects, and fixes self-closing tags.

What is HTML to JSX?

JSX (JavaScript XML) is a syntax extension for JavaScript used by React, Preact, and other frameworks to describe UI components. While JSX looks similar to HTML, it has several important differences that require conversion when moving HTML templates into React components. The most common differences include: HTML's class attribute becomes className in JSX (because "class" is a reserved word in JavaScript), for becomes htmlFor, inline styles must be JavaScript objects instead of strings, and void elements like <img>, <br>, and <input> must be self-closing (<img />, <br />, <input />). Manually converting HTML to JSX is tedious and error-prone, especially for large templates with many attributes, inline styles, and nested elements. This converter automates the entire process, handling all the attribute mappings, style conversions, and syntax adjustments in one click.

How to Use HTML to JSX

Paste your HTML code into the input area. Click "Convert" to transform it to valid JSX. The tool automatically converts class to className, for to htmlFor, inline styles to JavaScript objects, and makes void elements self-closing. For example, <div class="box" style="color: red"> becomes <div className="box" style={{color: "red"}}>. Copy the JSX output with one click.

How HTML to JSX Works

The converter processes your HTML through several transformation steps: • Attribute renaming: class → className, for → htmlFor, tabindex → tabIndex, readonly → readOnly, and 15+ other React-specific attribute names • Style conversion: Inline style strings like style="font-size: 14px; background-color: red" become style objects like style={{fontSize: "14px", backgroundColor: "red"}} with camelCase property names • Self-closing tags: Void elements (<img>, <br>, <input>, <hr>, <meta>, <link>) are made self-closing as required by JSX • Boolean attributes: Attributes like disabled, checked, and required are preserved as JSX boolean props • Event handlers: onclick becomes onClick, onchange becomes onChange, and other event attributes are converted to camelCase The converter preserves your HTML structure, text content, and nesting exactly as written while making only the changes necessary for valid JSX.

Common Use Cases

  • Migrating existing HTML templates into React or Next.js components
  • Converting HTML email templates to JSX for React Email or similar libraries
  • Bringing HTML snippets from design tools (Figma exports, Bootstrap components) into React projects
  • Converting HTML documentation examples to JSX for React-based documentation sites
  • Quickly adapting HTML prototypes or CodePen experiments into React components
  • Converting inline style attributes to React-compatible style objects

Frequently Asked Questions

What HTML attributes are converted?▼

The converter transforms class to className, for to htmlFor, tabindex to tabIndex, readonly to readOnly, onclick to onClick, and many more. All standard HTML attributes that differ in JSX are handled automatically.

Does it handle inline styles?▼

Yes. Inline style strings like style="color: red; font-size: 14px" are converted to JSX style objects: style={{color: "red", fontSize: "14px"}}. CSS property names are converted from kebab-case to camelCase.

What about self-closing tags?▼

JSX requires void elements to be self-closing. The converter automatically adds the closing slash to elements like <img>, <br>, <input>, <hr>, <meta>, and <link>.

Does it handle SVG elements?▼

Yes. SVG attributes like stroke-width, fill-opacity, and xmlns are converted to their JSX equivalents (strokeWidth, fillOpacity). SVG is commonly used in React components and the converter handles these cases.

Can I convert entire HTML pages?▼

You can convert any amount of HTML, from a single element to a full page template. For entire pages, you may need to manually add the React component wrapper (function/class declaration and return statement) around the converted JSX.

Does it handle data- and aria- attributes?▼

Yes. Custom data-* attributes and aria-* accessibility attributes are passed through unchanged, as they are valid in both HTML and JSX without modification.

Related Tools

JSON Escape

Escape special characters in your JSON strings online. Free, fast, and easy to u...

GraphQL Formatter

Format and beautify your GraphQL queries online for free. Properly indent and st...

Lua Beautifier

Beautify and format Lua code online for free. Auto-indent, clean up whitespace, ...