HTML to JSX Converter
HTML ko valid React JSX mein badlein aapke browser mein — class banta hai className, void tags self-close hote hain, aur inline styles style objects ban jaate hain. Aapki markup aapke device par rehti hai.
HTML to JSX Converter poori tarah aapke browser mein chalta hai. Jo markup aap paste karte hain woh aapke device par parse aur transform hoti hai aur kabhi ArrayKit ko upload nahi hoti.
HTML Formatter kholein
HTML to JSX Converter ke baare mein
HTML to JSX Converter HTML ke ek block ko JSX mein badal deta hai jise aap seedhe ek React component mein daal sakte hain. Yeh un attributes ko rename karta hai jinpar React zor deta hai — class banta hai className aur for banta hai htmlFor — baaki ko camelCase karta hai (tabindex → tabIndex, colspan → colSpan), aur br, img aur input jaise void elements ko self-close karta hai taaki markup valid ho. Inline style="color:red" strings camelCased properties ke saath style={{ color: 'red' }} objects mein parse hoti hain, aur HTML comments JSX comments ban jaate hain. Component option on karein taaki sab kuch ek exported function mein wrap ho jaaye. Yeh un developers ke liye bana hai jo ek design, ek email template ya ek static page ko React mein port kar rahe hain. Har conversion aapke browser mein chalta hai — jo markup aap paste karte hain woh kabhi aapke device se bahar nahi jaati.
Features
- class ko className aur for ko htmlFor automatically rename karta hai
- br, img, input aur hr jaise void elements ko self-close karta hai
- Inline style strings ko camelCased style objects mein convert karta hai
- Known attributes ko camelCase karta hai: tabindex ko tabIndex, colspan ko colSpan
- HTML comments ko JSX comment syntax mein rewrite karta hai
- data-* aur aria-* attributes aur boolean props ko intact rakhta hai
- Optionally result ko ek exported React function component mein wrap karta hai
- JSX copy karein ya use ek .jsx file ke roop mein download karein, sab aapke browser mein
HTML to JSX Converter kaise use karein
- Apni HTML baayein taraf input box mein paste karein
- Daayein taraf output panel mein converted JSX padhein
- 'Wrap in component' toggle karein aur ek ready-to-use component paane ke liye use naam dein
- JSX copy karein ya use ek .jsx file ke roop mein download karein
Example
Input
<label for="name" class="lbl" tabindex="0">Name</label>
<input type="text" required>
Output
<label htmlFor="name" className="lbl" tabIndex="0">Name</label>
<input type="text" required />
for banta hai htmlFor, class banta hai className, tabindex banta hai tabIndex, aur void <input> self-close ho jaata hai.
Common errors aur troubleshooting
- React warn karta hai ki 'class' ek invalid DOM property ya attribute hai. — HTML ko converter se guzaarein — yeh har class ko className (aur for ko htmlFor) mein rename karta hai taaki warning gayab ho jaaye.
- JSX <img> ya <br> par 'Expected corresponding closing tag' ke saath compile hone mein fail hoti hai. — JSX mein void elements ko self-closed hona chahiye. Converter <img … /> aur <br /> output karta hai taaki tags saaf parse hon.
- style attribute 'style prop expects a mapping, not a string' ke saath error deta hai. — React styles objects hote hain, strings nahi. HTML paste karein aur tool style="color:red" ko style={{ color: 'red' }} mein badal deta hai.
- Text mein ek literal curly brace ya ek raw < JSX ko tod deta hai. — Converter text nodes ke andar { } aur < > ko escape karta hai ({ aur < ke roop mein), taaki woh characters JSX ke roop mein padhe jaane ke bajaye text ke roop mein render hon.
Aksar pooche jaane wale sawaal
- Kaunse HTML attributes JSX ke liye rename hote hain?
- class banta hai className aur for banta hai htmlFor. Kai all-lowercase attributes camelCase hote hain — tabindex ko tabIndex, colspan ko colSpan, maxlength ko maxLength, readonly ko readOnly — jabki data-* aur aria-* attributes bilkul waise rakhe jaate hain jaise likhe hain.
- Yeh ek inline style attribute ko kaise convert karta hai?
- Ek style="color: red; font-size: 12px" string ek React style object mein parse hoti hai, style={{ color: 'red', fontSize: '12px' }}, har CSS property camelCased ke saath. --brand jaise CSS custom properties aur vendor prefixes preserve rehte hain.
- Kya yeh <br> aur <img> jaise void elements ko self-close karta hai?
- Haan. HTML void elements — br, img, input, hr, meta, link, source aur baaki — self-closed emit hote hain (<br />, <img … />) taaki JSX valid ho. Empty non-void elements bhi self-close ho jaate hain.
- Conversion ke dauraan HTML comments ka kya hota hai?
- HTML comments ko JSX comment syntax mein rewrite kiya jaata hai. Agar comment text mein ek star-slash sequence ho to use tod diya jaata hai taaki woh JSX comment ko jaldi close karke aapki build na tod sake.
- Kya yeh output ko ek React component mein wrap kar sakta hai?
- 'Wrap in component' on karein aur use ek naam dein. Tool ek exported function emit karta hai jo aapki JSX return karta hai, kai top-level elements ko ek fragment mein wrap karke taaki ek single root element ho.
- Kya yeh onclick aur doosre inline event handlers convert karega?
- Inline event attributes camelCase hote hain — onclick ko onClick, onchange ko onChange — lekin value ek string hi rehti hai. Aapko apne component mein string ko ek real handler function se badalna phir bhi hoga.
Related tools
- HTML Formatter — HTML beautify ya minify karein, inline CSS/JS format karein aur result preview karein.
- HTML to Markdown — HTML ko clean Markdown mein convert karein GFM tables ke saath.
- HTML Escape / Unescape — HTML special characters aur entities ko escape aur unescape karein.
- JSON-LD Generator — Article, Product, FAQ ke liye valid schema.org JSON-LD banayein
- CSS / SCSS Formatter — CSS/SCSS/LESS beautify ya minify karein, properties sort karein aur duplicates hatayein.
- Markdown Table Generator — Editable grid mein Markdown table banayein, GFM, HTML, LaTeX export karein
Saare ArrayKit tools