⚛️ 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.

HTML Input

JSX Output

How to Use

Choose direction

Select HTML → JSX to prepare HTML for React, or JSX → HTML to get standard HTML output.

Paste your code

Paste your HTML or JSX into the input area. Conversion happens automatically.

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 () 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.

Tam Rehber: HTML'den JSX'e Dönüştürücü

React bileşenleri oluştururken tasarım şablonlarından veya HTML örneklerinden kopyaladığınız içerik doğrudan JSX içinde çalışmaz. HTML-JSX dönüştürücü, bu mekanik dönüşümü otomatik olarak gerçekleştirir.

HTML ile JSX Arasındaki Farklar

JSX, JavaScript içinde yaşadığı için standart HTML'den daha katı kurallara tabidir:

class → className — class, JavaScript'te ayrılmış bir sözcüktür.
for → htmlFor — <label for="id"> yerine <label htmlFor="id"> kullanılır.
Kendini kapatan etiketler zorunlu — <br>, <img>, <input> gibi boş elemanlar <br /> şeklinde kapatılmalıdır.
Stil nesnesi olarak — style="color: red" yerine style={{ color: 'red' }} kullanılır; özellik adları camelCase olmalıdır.
Olay dinleyicileri camelCase — onclick → onClick, onchange → onChange.

Nasıl Kullanılır

HTML kodunuzu sol panele yapıştırın.
Dönüştürücü sağ panelde JSX çıktısını gerçek zamanlı olarak üretir.
Sonucu kopyalayıp React bileşeninizin return bloğuna yapıştırın.

Yaygın Hatalar

SVG nitelikleri — stroke-width → strokeWidth, fill-rule → fillRule şeklinde camelCase olur.
Dinamik değerler — Dönüşüm sonrası statik string değerlerini JS ifadesiyle değiştirin: src="{url}" → src={url}.
Birden fazla kök eleman — JSX tek bir kök eleman döndürmek zorundadır; kardeş elemanları <>...</> fragment'ine sarın.

Tailwind utility sınıflarını JSX'e dönüştürmek için Tailwind Dönüştürücü'ye, HTML özel karakterlerini kodlamak için HTML Varlık Kodlayıcı'ya bakın.