{{ summaryMetric }}
{{ summaryLine }}
{{ outputShapeLabel }} {{ result.elementCount }} tag(s) {{ result.attributeRows.length }} attribute row(s) {{ result.warnings.length ? result.warnings.length + ' review note(s)' : 'Clean JSX pass' }}
Paste the markup to translate. JSX output, migration rows, and validation checks update as you type.
{{ sourceActionHint }}
{{ fileStatus }}
Choose how the pasted markup should be parsed before JSX formatting.
Pick the artifact you want to copy into a React codebase.
Use a reusable React component name; invalid characters are cleaned in the output.
Convert CSS strings to React style objects, preserve them for review, or drop inline styles from the artifact.
Turn onclick/onchange and similar attributes into JSX handler stubs, or flag them while keeping strings for manual rewrite.
Choose whether HTML comments become JSX comment blocks or are removed from the generated artifact.
Default export is easiest for paste-and-import handoff; named export keeps barrel files explicit.
Use explicit true for auditability or JSX shorthand for compact component code.
Default trimming removes indentation-only text nodes produced by formatted HTML source.
Double quotes match common JSX examples; single quotes can match stricter project lint rules.
{{ boundedIndentSize }} spaces
Use two spaces for React snippets, or four when matching a wider codebase style.
spaces
Add a React import line only when your target build or lint rule needs it.
{{ include_react_import ? 'Add import' : 'No import' }} 
{{ result.output }}
Source JSX Location Detail Copy
{{ row.source }} {{ row.jsx }} {{ row.location }} {{ row.detail }}
Check Status Detail Copy
{{ row.check }} {{ row.status }} {{ row.detail }} 

        

      

    

  

                

                

                    

                        

                            Tags: Data Format, Devtools
                        

                        

                            Export to PDF
                            Fullscreen
                        

                    

                

            

        

    


                    
        

        

        

            

            
        

        


                    

                

                

                    

                                                    

                                
                            

                                                    

                                
                            

                                                    

                                
                            

                                                    

                                
                            

                                            

                

            

        
                                                                                                                                                                                                                                                        
        

        

            
            

                Customize

                

                    

                        

                            
                            
                        


                        

                            
                            
                        


                        

                            
                            
                        

                    


                    

                        Advanced

                        

                            

                                
                                

                                    
                                    
                                

                            


                            

                                
                                

                                    
                                    
                                

                            


                            

                                
                                

                                    
                                    :
                                    
                                

                            


                            

                                
                                

                                    
                                    
                                

                            


                            

                                

                                    
                                    
                                

                            


                            

                                

                                    
                                    
                                

                            


                            

                                
                                
                            


                            

                                
                                
                            

                        

                    

                

            

            
        


        

            
            
            
        


        
        

    

    

        

  
JSX is HTML-like markup written inside JavaScript. It looks familiar because tags, attributes, and text content resemble HTML, but the rules are tighter: JSX expressions need a single returned root, tags must be explicitly closed, and many DOM and SVG attributes use JavaScript-style property names.

  
That difference matters when static markup moves into a React component. A snippet copied from a CMS, design export, documentation page, or SVG icon can be valid HTML and still fail after pasting into JSX. Common friction points include class becoming className, for becoming htmlFor, dashed SVG attributes becoming camelCase, inline CSS becoming an object, and HTML event strings needing real JavaScript functions.

  

    HTML is parsed into a DOM tree, then emitted as JSX with review notes for attributes and handlers.
  

  
Conversion is useful for migration work and component handoffs, but the generated JSX still needs review in the target project, especially when the original markup contains scripts, raw text elements, copied inline JavaScript, framework-specific attributes, or accessibility relationships that depend on surrounding code.

  
A good conversion keeps the visible structure recognizable while making React-specific syntax explicit enough to review. The most important outcome is not a shorter snippet. It is a JSX handoff that shows what changed and where a human should inspect before committing it.






  
How to Use This Tool:

  
Start with the markup, choose the parsing scope, then review the generated JSX and the migration checks together.

  
    
    
  1. Paste markup into HTML source, drop a file on the textarea, or use Browse HTML. HTML, HTM, SVG, and TXT files are read in the browser, and files over 1 MB are rejected with a size warning.
    2. 
    
  2. Set Source scope. Auto fragment or body contents is the normal choice for snippets and full pages, Full document tree keeps html, head, and body elements, and SVG/XML root uses stricter SVG/XML parsing.
    3. 
    
  3. Pick JSX output shape. Use React function component when you want a paste-ready component, React fragment when multiple roots should stay grouped without an extra wrapper, or Raw JSX only when another file already owns the component wrapper.
    4. 
    
  4. If component output is selected, enter Component name and adjust Component export or React import in Advanced when your project expects a named export, no export, or an explicit React import.
    5. 
    
  5. Choose how to handle risky syntax. Inline styles can become React style objects, stay as strings for review, or be omitted. Event attributes can become handler stubs, stay as flagged strings, or be omitted. Comments can become JSX comments or be removed.
    6. 
    
  6. Use Advanced for boolean attribute style, text whitespace, attribute quote style, and indentation. If the summary says Input needs review, fix the parse error before copying any output.
    7. 
    
  7. Review JSX Component, JSX Fragment, or JSX Markup first, then check Attribute Migration and Conversion Checks. Copy or download the JSX only after warning rows match what you expect.
    8. 
  






  
Interpreting Results:

  
The summary count tells you how many tags were converted and how many review notes were found. It does not prove that the JSX will compile in your project or that copied event code is safe. Treat the generated JSX as the main artifact and the tables as the review trail.

  

    

      
      
        

          Result area
          What it shows
          What to verify
        

      
      
        

          JSX output tab
          The generated component, fragment, or raw JSX with selected indentation, comments, styles, booleans, and optional import/export choices.
          Paste into the target project and run the normal JSX parser or type checker before committing.
        

        

          Attribute Migration
          Each reviewed source attribute, the JSX form, its element location, and whether the value was renamed, preserved, converted, or omitted.
          Check rows for style, event attributes, SVG names, booleans, and unknown custom attributes.
        

        

          Conversion Checks
          Local processing status, parser mode, attribute changes, inline style mode, event mode, comments, generated length, and warning details.
          Read warning rows for DOCTYPE, raw text elements, preserved styles, and inline event code.
        

        

          JSON
          A structured record of the selected options, metrics, migration rows, conversion checks, warnings, and output text.
          Use it for review or handoff, not as a substitute for compiling the JSX.
        

      
    

  

  
A clean pass means the converter did not flag a known issue in the selected path. It does not mean the markup is accessible, sanitized, styled correctly, or compatible with every React version and build setting.






  
Technical Details:

  
JSX is parsed as JavaScript syntax, so attributes behave like property names rather than loose HTML text. React follows DOM-style naming for many built-in attributes, which is why tabindex becomes tabIndex, class becomes className, and for becomes htmlFor. Accessibility and custom data attributes keep their dashed HTML spelling because React treats aria-* and data-* as special pass-through families.

  
HTML parsing and JSX printing are separate concerns. HTML parsers can repair omitted end tags, normalize case, and ignore content inside void elements. SVG and XML parsing is stricter, so malformed SVG returns a parse error instead of a repaired tree. JSX output then has to express the resulting element tree using explicit closing tags, self-closing syntax, and React-compatible attribute names.

  
Inline event attributes deserve separate review. HTML event attributes are strings that the browser can treat as executable code in an active document. React event props expect functions. A generated handler stub can preserve the original body as a review aid, but it should not be treated as finished application logic.


  
Transformation Core:

  

    

      
      
        

          Stage
          Conversion behavior
          Review limit
        

      
      
        

          Scope selection
          Auto mode uses body children for normal documents, keeps SVG roots when the input starts as SVG, and falls back to the parsed document element when needed.
          Choose full document output only when html, head, and body belong in the handoff.
        

        

          Element formatting
          Elements are printed with explicit JSX tags. Empty element output is self-closed, and multiple roots can be wrapped in a fragment.
          Browser-repaired HTML may not match the original text exactly, especially around omitted tags and void elements.
        

        

          Attribute migration
          Known HTML, SVG, event, boolean, data, and aria attributes are mapped to their JSX forms or preserved when React expects the original spelling.
          Rows marked unchanged can still need project review if they are custom attributes, library-specific attributes, or copied from untrusted markup.
        

        

          Style handling
          Inline CSS declarations can become a React style object with camelCased property names, stay as a string for manual review, or be removed.
          Converted values preserve text where units matter. Review shorthand, vendor-specific, custom-property, and dynamic style values before use.
        

        

          Event handling
          Inline event names such as onclick can become JSX handler names such as onClick, with a function stub when that mode is selected.
          Do not trust copied inline JavaScript as final React logic. Replace it with project-owned handlers.
        

        

          Review output
          The checks table summarizes parser mode, changed attributes, style mode, event mode, comments, output size, and warning text.
          Use the checks to find manual-review rows, then compile and test the JSX in the project that will own it.
        

      
    

  


  
Attribute Mapping Reference:

  

    

      
      
        

          Source pattern
          Typical JSX form
          Why it changes
        

      
      
        

          class
          className
          React uses the DOM property name for CSS classes.
        

        

          for
          htmlFor
          Labels use the DOM property name that associates the label with a control.
        

        

          tabindex, maxlength, readonly
          tabIndex, maxLength, readOnly
          Many React DOM props use camelCase JavaScript property spelling.
        

        

          stroke-width, fill-rule, viewbox
          strokeWidth, fillRule, viewBox
          SVG attributes are usually written as React-compatible prop names.
        

        

          xlink:href, xml:space
          xlinkHref, xmlSpace
          Namespaced SVG/XML attributes lose the colon in JSX prop spelling.
        

        

          data-*, aria-*
          unchanged dashed spelling
          React preserves these attribute families for data attributes and accessibility metadata.
        

        

          disabled, checked, readonly
          disabled={true} or JSX shorthand
          HTML boolean attributes are true when present, even if the original text looked like a false string.
        

        

          onclick="save()"
          onClick={() => { save(); }} when handler stubs are selected
          React event props expect functions, not HTML event strings.
        

      
    

  

  
Text nodes are escaped for JSX text output, HTML comments can become JSX comment blocks, and indentation affects formatting only. Quote style changes string attributes; it does not change the parsed tree or the attribute migration rules.






  
Privacy and Safety Notes:

  
The pasted markup and accepted files are parsed and formatted in the browser. The conversion checks report Local processing when the HTML was not sent to a server for conversion.

  
    
    
  • Local conversion protects the pasted text from upload during this task, but it does not make unsafe markup safe to reuse.
    • 
    
  • Generated handler stubs and preserved event strings need review because they may contain copied inline JavaScript.
    • 
    
  • Raw text or preformatted elements such as script, style, textarea, and pre can carry escaping or runtime assumptions that a syntax converter cannot fully judge.
    • 
    
  • Compile, lint, and test the output in the target project before treating it as finished code.
    • 
  






  
Worked Examples:

  
Static card to component

  
A pricing card with class="pricing-card", for="team-email", disabled, and style="margin-top: 16px; background-color: #f8fafc;" converts cleanly as a React function component. JSX Component shows className, htmlFor, explicit boolean output, and a style object. Attribute Migration records each renamed or converted attribute so the handoff does not depend on visual scanning alone.

  
SVG icon cleanup

  
An SVG path with stroke-width="2", stroke-linecap="round", and fill-rule="evenodd" should use SVG/XML root when you want strict SVG parsing. The output keeps the SVG shape but changes those attributes to strokeWidth, strokeLinecap, and fillRule. If the SVG is malformed, the summary changes to Input needs review and the parse message must be fixed before copying JSX.

  
Inline event handoff

  
A copied button with onclick="trackSignup('team')" produces a review note. In handler mode, JSX Component shows an onClick function stub and Conversion Checks warns that the inline JavaScript needs review. If you choose to keep event strings instead, the output remains easier to compare with the original markup but is not valid final React event code.






  
FAQ:

  

    Is the generated JSX ready to paste into React?
    
It is a useful migration handoff, not final proof. Check the warning list, review Attribute Migration, then compile and test the copied JSX in the project that will use it.

  

  

    Why did valid HTML change after conversion?
    
JSX has stricter syntax than HTML. Tags are explicitly closed, many attributes use camelCase, class changes to className, and multiple roots may need a fragment.

  

  

    What happens to a full HTML document?
    
Auto fragment or body contents uses the body children for normal documents. Choose Full document tree only when the generated JSX should include the document-level elements for review or handoff.

  

  

    Are selected files sent anywhere?
    
Accepted HTML, HTM, SVG, and TXT files are read in the browser for conversion. Files larger than 1 MB are rejected before conversion, and the checks table reports local processing.

  

  

    Why are inline styles sometimes flagged?
    
React usually expects inline styles as an object with camelCased property names. Preserved style strings are flagged because they need a manual rewrite before normal React use.

  

  

    Can this sanitize untrusted HTML?
    
No. The converter rewrites syntax and reports review notes. It does not certify that copied markup is safe, accessible, or appropriate to render in an application.

  






  
Glossary:

  

    
JSX

    
HTML-like syntax that can appear inside JavaScript and is commonly used to describe React UI.

    
React prop

    
A named value passed to a React element or component, including DOM props such as className and htmlFor.

    
DOM tree

    
The element, text, and comment structure produced when markup is parsed.

    
Boolean attribute

    
An HTML attribute such as disabled or checked whose presence means true.

    
Void element

    
An HTML element such as img, input, or br that cannot have child content in HTML syntax.

    
Fragment

    
A JSX wrapper written as <> and </> that groups multiple children without adding a DOM element.

    
Handler

    
A JavaScript function passed to an event prop such as onClick.

    
SVG/XML root

    
A parsing choice for SVG markup where XML well-formedness errors are reported instead of silently repaired as HTML.

  






  
References: