HTML to JSX Converter

How to Use the HTML to JSX Converter

This free online tool converts HTML to valid React JSX. Paste your HTML on the left, click the convert button, and copy the result straight into your component. It handles all common transformations: class to className, for to htmlFor, inline style strings to style objects, self-closing void elements, HTML comments to JSX comments, and camelCase event handler conversion. Perfect for migrating HTML templates to React components. All processing happens in your browser with no data sent to any server.

What Gets Converted

• class → className, for → htmlFor, plus roughly 30 other DOM attributes such as tabindex, readonly, colspan and srcset
• Inline style strings become camelCased objects; pixel values like 14px are emitted as the number 14
• Void elements (<img>, <br>, <input>, ...) gain a closing slash: <img ... />
• HTML comments <!-- --> become {/* */}
• Event handler names are camelCased (onclick → onClick)
• data-* and aria-* attributes are intentionally left untouched — exactly what React expects

Why HTML Is Not Valid JSX

JSX looks like HTML but compiles down to JavaScript function calls. Reserved words such as class and for clash with JavaScript keywords, every element must be explicitly closed, and attribute values are JavaScript expressions rather than plain strings. That is why a pasted HTML snippet usually refuses to compile inside a React component until these mechanical rewrites are applied.

What Still Needs a Manual Pass

Event handler values stay strings (onClick="handleClick()") and must be replaced with function references after conversion. Kebab-case SVG attributes such as stroke-width are not renamed, and template syntax from other engines ({{ }}, <% %>) will conflict with JSX braces.

HTML to JSX Converterの使い方

HTMLコードを入力すると、React JSX形式に自動変換されます。class→className、 for→htmlFor、style文字列→オブジェクト形式、void要素の自動閉じタグ付与、 HTMLコメント→JSXコメント変換など、React開発に必要な変換を一括で行います。 tabindex→tabIndex、readonly→readOnly、colspan→colSpan など約30種類の属性マッピングに 対応しており、data-* と aria-* 属性は React でもそのまま有効なため変換せずに残します。 「サンプル」ボタンで変換例をすぐに確認できます。

実務での活用例

1. 静的サイト・LPのReact / Next.js移行

制作会社から納品されたLPや既存の静的サイトをReactコンポーネント化するとき、 最初に詰まるのが大量の class 属性と閉じられていない <img> / <br> タグです。セクション単位でHTMLを貼り付けて 変換すれば、機械的な書き換えは一括で終わり、残る作業はイベントハンドラと状態管理の 実装だけになります。

2. CMS・メールテンプレート出力の取り込み

WordPressのブロックエディタやメールビルダーが出力するHTMLには、インラインの style 属性が大量に含まれます。JSXでは style は文字列ではなくオブジェクトで 渡す必要があるため手作業の変換が特に面倒ですが、本ツールは font-size: 14px → fontSize: 14 のようにキャメルケース化と 数値化まで自動で行います。

3. 生成AI・デザインツール出力の整形

ChatGPTなどの生成AIやFigmaプラグインは、Reactを指定し忘れると素のHTMLを出力しがちです。 出力をそのままコンポーネントに貼るとビルドエラーになりますが、本ツールを通してから 貼り付ければコンパイルが通る形に整います。整形が必要ならHTML Formatter、Markdown化したい場合はHTML to Markdownも併用できます。

よくあるエラーと対処 / Common Errors and Fixes

HTMLをそのままReactに貼り付けたときに出る代表的なエラー・警告と、変換後に残る注意点をまとめました。

Typical errors and warnings you hit when pasting raw HTML into React, plus the gotchas that remain after conversion.

言語別コード例 / Code Examples by Language

本ツールと同等の変換をスクリプトで自動化する場合の最小サンプルです。正規表現ベースの 簡易変換のため、大規模な移行ではASTベースのツールの併用を検討してください。

Minimal snippets to reproduce the conversion programmatically. They are regex-based approximations — consider an AST-based tool for large migrations.

JavaScript / TypeScript

// class / for / void要素 / コメントの最小変換
const jsx = html
  .replace(/\bclass="/g, 'className="')
  .replace(/\bfor="/g, 'htmlFor="')
  .replace(/<(img|br|hr|input)([^>/]*)>/gi, "<$1$2 />")
  .replace(/<!--([\s\S]*?)-->/g, "{/* $1 */}");

Python

import re

def html_to_jsx(html: str) -> str:
    html = re.sub(r'\bclass="', 'className="', html)
    html = re.sub(r'\bfor="', 'htmlFor="', html)
    html = re.sub(r'<(img|br|hr|input)([^>/]*)>', r'<\1\2 />', html)
    return re.sub(r'<!--(.*?)-->', r'{/* \1 */}', html, flags=re.S)

Go

import "regexp"

var (
    classRe = regexp.MustCompile(`\bclass="`)
    voidRe  = regexp.MustCompile(`<(img|br|hr|input)([^>/]*)>`)
)

func htmlToJSX(html string) string {
    html = classRe.ReplaceAllString(html, `className="`)
    return voidRe.ReplaceAllString(html, `<$1$2 />`)
}

Shell (sed)

# class / for 属性だけを一括置換 / Bulk-rename class and for attributes
sed -E 's/\bclass="/className="/g; s/\bfor="/htmlFor="/g' index.html > component.jsx

Before / After 実例 / Before & After

例1: class + style + void要素 / class, style and void elements

<div class="card">
  <img src="photo.jpg" alt="Photo">
  <p style="color: red; font-size: 14px;">Hello</p>
</div>

↓

<div className="card">
  <img src="photo.jpg" alt="Photo" />
  <p style={{ color: "red", fontSize: 14 }}>Hello</p>
</div>

px単位は数値リテラル(fontSize: 14)に、それ以外の値は文字列になります。

Pixel values become number literals (fontSize: 14); other values stay strings.

例2: フォーム属性 / Form attributes

<label for="email">Email</label>
<input type="email" id="email" readonly tabindex="1">

↓

<label htmlFor="email">Email</label>
<input type="email" id="email" readOnly tabIndex="1" />

例3: コメントとイベントハンドラ / Comments and event handlers

<!-- 送信ボタン -->
<button onclick="submitForm()" disabled>Send</button>

↓

{/* 送信ボタン */}
<button onClick="submitForm()" disabled>Send</button>

ハンドラ名はキャメルケース化されますが値は文字列のままです。Reactでは onClick={submitForm} のように関数参照へ手動で書き換えてください。

Handler names are camelCased but the value stays a string — rewrite it as a function reference like onClick={submitForm}.

Why browser-only? / なぜブラウザ完結か

The HTML you convert rarely comes out of thin air. It is copied from a production landing page, an internal admin screen, a CMS database, or a marketing email template — markup that can embed customer names, order numbers in data-* attributes, CSRF tokens inside forms, internal URLs and analytics IDs. Uploading that to a server-side converter quietly shares it with a third party, even if all you wanted back was the same markup with className instead of class. DevToolBox performs every transformation with plain JavaScript string operations inside your browser tab. There is no upload endpoint and no network request of any kind: open DevTools, switch to the Network tab, convert your HTML, and the request list stays empty. Once loaded, the page even works offline — convenient when migrating code inside a restricted corporate network.

変換対象のHTMLには、顧客名や注文番号入りの data-* 属性、フォーム内の CSRFトークン、社内URLなどが含まれがちです。本ツールはすべての変換をブラウザ内の JavaScriptだけで実行し、サーバーへのアップロードは一切行いません。DevToolsのNetwork タブで通信が発生しないことを自分で確認でき、一度読み込めばオフラインでも動作します。