{"generatedAt":"2026-07-28T12:37:45.744Z","tool":{"id":"html-to-jsx","name":"HTML to JSX Converter","description":"Convert HTML to JSX with automatic attribute renaming, style objects, self-closing tags, and comment conversion","category":"converter","icon":"⟨/⟩","keywords":["html","jsx","react","convert","className","attributes","style","component"],"remoteCallable":true,"remoteMode":"dedicated_api","riskClass":"L","maxInputBytes":131072,"timeoutMs":2000,"supportsStreaming":false,"url":"/html-to-jsx/","tags":["converter"],"faqs":[{"question":"What is HTML to JSX Converter?","answer":"HTML to JSX Converter transforms standard HTML into valid JSX for React applications. It handles attribute renaming, style object conversion, self-closing tags, and comment syntax automatically."},{"question":"How do I use HTML to JSX Converter?","answer":"Paste your HTML code in the input area and the tool converts it to JSX instantly. It renames attributes like class to className, converts inline styles to JavaScript objects, and fixes self-closing tags."},{"question":"What HTML attributes does it convert?","answer":"It converts all standard HTML-to-JSX attribute changes including class to className, for to htmlFor, tabindex to tabIndex, inline style strings to style objects, and HTML comments to JSX comment syntax. It also properly self-closes void elements like <img>, <br>, and <input>."}],"howTo":[{"title":"Paste HTML markup","description":"Paste any HTML code snippet. Include div wrappers, event handlers (onclick, onhover), class attributes, and data attributes."},{"title":"Auto-convert attributes to JSX","description":"The tool automatically converts `class` → `className`, `for` → `htmlFor`, `onclick` → `onClick`, and hyphenated attributes to camelCase."},{"title":"Review and adjust JSX output","description":"Check the converted JSX. If there are custom attributes (data-*), they're preserved. Ensure inline styles are converted to camelCase property names."},{"title":"Handle conditional rendering","description":"For dynamic attributes or conditions, manually add JSX expressions (e.g., `{isActive && 'active'}` for conditional classes)."},{"title":"Copy JSX or create React component","description":"Copy the converted JSX to clipboard or generate a complete React functional component with state/props. Ready to use in your React project."}],"agentContract":{"toolId":"html-to-jsx","contractVersion":"2.0.0","remote_callable":true,"remote_mode":"dedicated_api","risk_class":"L","max_input_bytes":131072,"timeout_ms":2000,"supports_streaming":false,"preferred_surface":"dedicated_api","dedicated_api":{"baseUrl":"https://aidevhub.io/api/html-to-jsx/","openapiUrl":"https://aidevhub.io/api/openapi.yaml","endpoints":[{"method":"GET","path":"/api/html-to-jsx/","summary":"GET html-to-jsx"},{"method":"POST","path":"/api/html-to-jsx/","summary":"POST html-to-jsx"}],"riskClass":"L","inputMaxBytes":131072,"timeoutMs":2000},"runtime":{"endpoint":"/api/tools/run/","methods":["GET","POST"],"queryParams":[{"name":"toolId","required":true,"description":"Tool identifier"},{"name":"a","required":true,"description":"Primary input"}],"postBodyShape":{"toolId":"string","input":"{ a, b?, c?, mode? }"},"exampleGet":"https://aidevhub.io/api/tools/run/?toolId=html-to-jsx&a=...","policy":{"riskClass":"L","limit":60,"burst":20,"windowSec":60,"inputMaxBytes":131072,"timeoutMs":2000,"cacheTtlSec":0,"networkEnabled":false,"supportsStreaming":false}}},"relatedTools":[{"id":"tailwind-converter","name":"CSS to Tailwind Converter","url":"/tailwind-converter/","category":"converter"},{"id":"yaml-json","name":"YAML ↔ JSON Converter","url":"/yaml-json/","category":"converter"},{"id":"text-case-converter","name":"Text Case Converter","url":"/text-case-converter/","category":"converter"},{"id":"toml-editor","name":"TOML Editor & Converter","url":"/toml-editor/","category":"converter"},{"id":"csv-json","name":"CSV ↔ JSON Converter","url":"/csv-json/","category":"converter"},{"id":"markdown-to-html","name":"Markdown to HTML Converter","url":"/markdown-to-html/","category":"converter"}]}}