HTML

HTML & SVG to JSX Converter

Convert markup into JSX with React attribute names, inline style objects, and clear notices for code that needs review.

Ctrl / ⌘ + Enter to convert

Local processing starts when the converter is ready.

Up to 200,000 input code units · No uploads

Tab indents · Esc, then Tab moves focus Ln 1, Col 1

Input stays in this browser tab. Editing clears the previous result.

Select and copy any part of this code. Ln 1, Col 1
JSX

Read-only generated output. Copy and download preserve its exact text.

Turn HTML and SVG into reviewable JSX

This converter parses an HTML fragment or complete document with parse5, maps HTML and SVG attributes using property-information, and parses inline CSS with style-to-object. It generates one JSX fragment. The tool does not render your markup, execute scripts, or load image and stylesheet URLs.

How to use the converter

  1. Paste an HTML or inline SVG fragment, or select complete-document parsing for a full page.
  2. Choose indentation and select Convert to JSX, or press Ctrl/Cmd+Enter.
  3. Review notices about removed behavior or normalized markup. Copy or download the exact JSX output.
  4. Place the fragment inside your React component, add reviewed event handlers and state, and test it in your application.

What changes in JSX?

HTML class and for become className and htmlFor. SVG properties such as stroke-width become strokeWidth, while data and ARIA attributes retain their hyphens. Void elements are closed, and decoded text is placed in string expressions so braces and whitespace remain literal.

Inline style declarations become an object with camel-cased property names; CSS custom properties keep their original names. Duplicate CSS properties use the final declaration and produce a warning. Inline !important cannot be faithfully represented by an ordinary React style object, so conversion asks you to move it to a stylesheet.

Forms and executable behavior

Input values and checked states become defaultValue and defaultChecked. Textareas use their parsed text as a default value. Selected options become the select's default value, including arrays for multiple selection. Add React state and event handlers separately.

Script, iframe, object, embed, base, meta-refresh, inline event handlers, srcdoc, and active scripting URLs are omitted with notices. React-reserved key, ref, and children attributes also require manual review. Other resource URLs and CSS are preserved as code and can become active when you run the result in your own application. This converter is not a general-purpose sanitizer.

Limits and parser behavior

The HTML parser follows browser parsing rules, so malformed nesting, optional closing tags, capitalization, and document structure may normalize. Fragment mode uses its normal HTML fragment context; bare table rows may need a surrounding table. Comments and doctypes are omitted. Custom elements remain HTML custom elements, and template behavior needs review. Existing JSX, framework templates, and MathML are outside this tool's scope.

Input is limited to 200,000 UTF-16 code units, 15,000 nodes, 40,000 attributes, and 60 levels. Expanded output is capped at 1,000,000 code units. Processing runs in a cancellable worker and stops after ten seconds. Invalid input clears previous output, and downloads match the displayed code.

Official references

Consult React's JSX guide , React DOM properties and styles , parse5, and property-information for the underlying syntax and mappings.

Related Tools