DevBolt
Processed in your browser. Your data never leaves your device.

How do I convert HTML to JSX for React?

Paste your HTML and instantly get valid JSX with 50+ attribute conversions — class to className, for to htmlFor, inline styles to objects, SVG attributes to camelCase, and void elements self-closed. The tool shows a change log of all transformations. Everything runs in your browser.

Convert class to className
Input
<div class="container">
  <label for="email">Email</label>
  <input type="email" tabindex="1" />
</div>
Output
<div className="container">
  <label htmlFor="email">Email</label>
  <input type="email" tabIndex="1" />
</div>

HTML to JSX Converter

Convert HTML to valid JSX — transforms attributes, inline styles, comments, void elements, event handlers, and SVG attributes.

Examples

HTML Input

JSX Output

<div className="container">
  <h1 className="title">Hello World</h1>
  <p className="text-gray-500">Welcome to my app.</p>
</div>

Changes Made

class→className×3

HTML → JSX Quick Reference

HTMLJSXWhy
class="..."className="...""class" is a reserved word in JavaScript
for="..."htmlFor="...""for" is a reserved word in JavaScript
style="color: red"style={{ color: 'red' }}JSX styles are objects, not strings
<!-- comment -->{/* comment */}JSX uses JS comment syntax
<br><br />JSX requires self-closing void tags
<img ...><img ... />All void elements must self-close
tabindex="0"tabIndex="0"JSX uses camelCase attributes
onclick="..."onClick={() => {}}Event handlers are camelCase functions
colspan="2"colSpan="2"Multi-word attributes are camelCase
stroke-width="2"strokeWidth="2"SVG attributes use camelCase in JSX

Related Guides

HTML vs JSX DifferencesReact JSX CheatsheetJSX Style Objects Guide

Tips & Best Practices

Pro Tip

class → className is just the start

Beyond class → className, HTML-to-JSX conversion handles 50+ attribute renames: for → htmlFor, tabindex → tabIndex, onclick → onClick, stroke-width → strokeWidth, and all SVG attributes. Missing even one causes React warnings and broken functionality.

Common Pitfall

Inline style strings must become objects

HTML: style="margin-top: 10px; background-color: red". JSX: style={{ marginTop: '10px', backgroundColor: 'red' }}. The conversion involves camelCasing every CSS property and wrapping values as strings. Numeric values (except unitless ones like zIndex) need string quotes.

Real-World Example

Port HTML email templates to React Email or MJML

Email templates are notoriously HTML-heavy with inline styles and legacy attributes. Converting to JSX is the first step toward using React Email, which lets you build email templates with components. Convert the HTML, then extract repeated patterns into reusable React components.

Security Note

innerHTML → dangerouslySetInnerHTML is intentionally scary

React renamed innerHTML to dangerouslySetInnerHTML as a warning. If your HTML uses innerHTML, the converter preserves it — but you should replace it with proper React components. Rendering user-supplied HTML via dangerouslySetInnerHTML is the #1 source of XSS in React apps.

Frequently Asked Questions

How do I convert HTML to JSX for React?
Paste your HTML into DevBolt's converter and it transforms the markup into valid JSX. The converter handles all required attribute transformations: class becomes className, for becomes htmlFor, tabindex becomes tabIndex, and event handlers convert to camelCase. Inline style strings are converted to JavaScript objects with camelCase property names. Self-closing tags receive the required closing slash. The output is ready to paste directly into a React component.
What are the key differences between HTML and JSX syntax?
JSX uses camelCase attributes instead of lowercase: className instead of class, htmlFor instead of for, onClick instead of onclick. The style attribute takes a JavaScript object instead of a CSS string. All tags must be explicitly closed, including void elements like br and img. JSX uses curly braces for JavaScript expressions. Comments use {/* */} instead of HTML comments. Adjacent elements must be wrapped in a parent element or Fragment.
Does the converter handle inline styles and SVG attributes?
Yes. Inline CSS style strings are parsed and converted to JavaScript object syntax with camelCase property names. SVG attributes follow JSX conventions: stroke-width becomes strokeWidth, fill-opacity becomes fillOpacity. SVG-specific attributes like viewBox already use camelCase and remain unchanged. The converter processes all standard HTML and SVG attributes, ensuring the JSX output renders identically to the original HTML in a React application.

Related Convert Tools

%20

URL Encoder & Decoder

Encode and decode URLs with encodeURIComponent and encodeURI

YML

JSON ↔ YAML Converter

Convert between JSON and YAML for Kubernetes, Docker, and CI/CD configs

&;

HTML Entity Encoder

Encode and decode HTML entities, special characters, and symbols

IMG

Image to Base64

Convert images to Base64 data URIs or decode Base64 back to images