⚛️ HTML ↔ JSX Converter
Convert HTML snippets to valid JSX for React components. Handles className, camelCase props, and self-closing tags. Free online HTML to JSX converter — no signup.
How to Use
1
Choose direction
Select HTML → JSX to prepare HTML for React, or JSX → HTML to get standard HTML output.
2
Paste your code
Paste your HTML or JSX into the input area. Conversion happens automatically.
3
Copy the result
Click Copy. Your converted code is ready to paste into your project.
Frequently Asked Questions
What is the difference between HTML and JSX?
JSX is a syntax extension for JavaScript used in React. Key differences: class becomes className, for becomes htmlFor, event handlers are camelCase (onclick → onClick), all tags must be self-closing (<br /> not <br>), and inline styles use objects ({color:"red"} not "color:red").
How do I convert class to className automatically?
This tool automatically converts all class="..." attributes to className="..." and for="..." to htmlFor="...". It also fixes event attributes (onclick, onchange, etc.) to their React camelCase equivalents.
What happens to HTML comments in JSX?
HTML comments (<!-- comment -->) are converted to JSX comments ({/* comment */}). JSX requires wrapping them in curly braces as JavaScript expressions.
Does JSX require all tags to be self-closing?
Tags with no children must be self-closed in JSX: <br />, <input />, <img />, <hr />. This tool automatically adds the closing slash to all void HTML elements when converting HTML to JSX.
Can I convert JSX back to HTML?
Yes — select JSX → HTML direction. The tool converts className back to class, htmlFor to for, reverts camelCase events to HTML attributes, and converts self-closing tags back to HTML void element syntax.
完整指南：HTML转JSX工具
为什么HTML不能直接用于JSX？
JSX与HTML有关键区别：属性使用camelCase（className而非class，htmlFor而非for），所有元素必须关闭，内联样式使用JS对象。直接将HTML粘贴到React组件会产生错误——此工具自动转换为有效的JSX。
如何使用
- 在左侧面板粘贴HTML。
- 等效的JSX即时出现在右侧。
- 检查转换：
class→className，事件为camelCase。 - 复制JSX用于React组件。
专业技巧
- JSX需要单一根元素——将多个元素包裹在
<>...</>（Fragment）中。 - 带连字符的属性（
data-id、aria-label）在JSX中保持不变。 - JSX中的JS表达式放在花括号中：
{variable}。