HTML to JSX Converter

Convert HTML to React JSX: class to className, inline styles to objects, self-closing void tags and JSX comments.

Runs in your browserHTML → JSX

Loading tool…

Example

Input

<div class="card" style="margin-top: 4px; font-size: 12px">
  <label for="email">Email</label>
  <input id="email" disabled>
  <!-- note -->
</div>

Output

<div className="card" style={{ marginTop: '4px', fontSize: '12px' }}>
  <label htmlFor="email">Email</label>
  <input id="email" disabled />
  {/* note */}
</div>

How to use the HTML to JSX Converter

Paste or type your HTML into the input area, or open a file from your device.
Adjust the options above the editor if the tool offers any.
Review the JSX result, then copy it or download it as a file.

Privacy and limitations

Your data is processed on your device and is not uploaded to any server.
Inline event handlers (onclick="...") are wrapped in arrow functions as-is; review them before use.

HTML BeautifierBeautify HTML with Prettier: consistent indentation plus formatting of embedded CSS and JavaScript.CSS to JS Object ConverterConvert CSS declarations or rules into camelCase JavaScript style objects for React, CSS-in-JS or JSON.Text to HTML ConverterTurn plain text into HTML paragraphs and line breaks, escaping special characters and optionally linking URLs.HTML to Text ConverterStrip HTML tags and extract readable plain text, keeping paragraphs, line breaks and list bullets.HTML Table to CSV ConverterExtract an HTML <table> into CSV, expanding colspan and rowspan cells. Pick which table when there are several.Markdown to HTML ConverterConvert Markdown (including GitHub tables and strikethrough) to sanitised HTML with a safe live preview.HTML Table to JSON ConverterConvert an HTML <table> into a JSON array of objects keyed by the header row, with optional number detection.HTML to Markdown ConverterConvert HTML to clean Markdown: headings, lists, links, images, code blocks and emphasis. Scripts and styles are dropped.

Browse all html converters →