JSONToTable

Loading HTML to JSX Converter...

How to Convert HTML to JSX - Step by Step Guide

Step 1

Input Your HTML Code

Get your HTML ready for conversion to JSX! Whether you're migrating HTML templates to React, converting Bootstrap components, or building reusable components, you have several convenient options:

•
Paste directly: Copy your HTML code and paste it into the input editor
•
Upload a file: Click "Upload" to select an .html, .htm, or .txt file from your computer
•
Try the sample: Click "Sample" to load example HTML and see how the converter works

Example: HTML Input

Standard HTML code:

<div class="container">
  <label for="email">Email:</label>
  <input type="email" class="input-field" readonly>
  <button onclick="handleSubmit()">Submit</button>
</div>
Step 2

Automatic Conversion to JSX

The JSX appears as you type. The tool takes care of the usual JSX requirements, converting standard DOM attributes to React-friendly syntax:

•
class → className: Converts HTML class attribute to JSX className
•
for → htmlFor: Converts label for attribute to htmlFor
•
Style conversion: Converts inline styles to JSX style objects
•
Event handlers: onclick="save()" becomes onClick={() => { save(); }}, and the same goes for onchange, onsubmit and the rest
•
Self-closing tags: Adds proper closing to img, input, br, hr tags

Example: JSX Output

The same code, now in JSX format:

<div className="container">
  <label htmlFor="email">
    Email:
  </label>
  {' '}
  <input type="email" className="input-field" readOnly={true} />
  {' '}
  <button onClick={() => { handleSubmit(); }}>
    Submit
  </button>
</div>
Step 3

Export Your JSX Code

Get your converted JSX ready to use in your React app:

•
Copy to clipboard: One-click copying for quick pasting into your React components
•
Download as file: Save as a .jsx file for later use
•
Finish the component: Paste it into a component's return statement and add the functions its handlers call (handleLogin in the example below). Tidy the layout with the JSX Formatter, or use HTML to TSX if your project is TypeScript

Example: Form Conversion

Original HTML form:

<form class="login-form" style="max-width: 400px; margin: 0 auto;">
  <label for="username">Username</label>
  <input type="text" id="username" class="form-input" required>
  
  <label for="password">Password</label>
  <input type="password" id="password" class="form-input" required>
  
  <button type="submit" class="btn-primary" onclick="handleLogin()">
    Log In
  </button>
</form>

Converted JSX ready for React:

<form className="login-form" style={{ maxWidth: '400px', margin: '0 auto' }}>
  <label htmlFor="username">
    Username
  </label>
  {' '}
  <input type="text" id="username" className="form-input" required={true} />
  {' '}
  <label htmlFor="password">
    Password
  </label>
  {' '}
  <input type="password" id="password" className="form-input" required={true} />
  {' '}
  <button type="submit" className="btn-primary" onClick={() => { handleLogin(); }}>
    {' '}Log In{' '}
  </button>
</form>

✓ React renders this to the same form as the original HTML.

Frequently Asked Questions

What's the difference between HTML and JSX?

JSX is a syntax extension for JavaScript used in React. The main differences: class becomes className, for becomes htmlFor, inline styles are objects instead of strings, every tag has to be closed, and event handlers are camelCase functions (onClick instead of onclick="...").

Which attributes get renamed?

The ones React spells differently: class becomes className, for becomes htmlFor, and lowercase names such as tabindex, readonly, maxlength, colspan and srcset get React's camelCase spelling. Boolean attributes like required or disabled turn into required={true}. data-* and aria-* attributes stay as they are, and SVG keeps its own casing, so viewBox and linearGradient come through untouched. Attributes JSX can't spell, like Alpine's @click or Vue's :class, are kept in a spread object so the file still parses.

Can I convert entire HTML pages or just snippets?

Both. A single tag works, and so does a whole page. With a full document the html, head and body tags themselves are dropped, but everything inside them is converted, title and meta tags included, so it's usually easier to paste only the part of the body you're turning into a component. If you paste several elements side by side, they're wrapped in a <>...</> fragment.

How does inline style conversion work?

Each declaration in the style attribute becomes a property in a style object, with kebab-case names turned into camelCase. For example, style="color: red; font-size: 16px" becomes style={{ color: 'red', fontSize: '16px' }}. Values are copied as text, so things like 14.50px, a quoted font name or a long data: URL come through unchanged.

Will the converted JSX work straight away in my component?

It parses as JSX and renders the same markup, but a few things are left to you. An inline handler such as onclick="handleSubmit()" becomes onClick={() => { handleSubmit(); }}, so handleSubmit has to exist in your component. Text inputs get defaultValue instead of value, which keeps them editable without wiring up state. Where a space between inline elements matters you'll see {' '} in the output, which is how JSX keeps that space.

Is there any TypeScript in the output?

No. The output is plain JSX for .jsx or .js files: no type annotations and no casts, not even for CSS custom properties like --main-color. If your project uses TypeScript, the HTML to TSX converter gives you the same markup ready for .tsx files.

Is my HTML uploaded anywhere?

No. The conversion runs in your browser. Your HTML is read as inert markup, so scripts in it don't run and images don't load while it's being converted.

Related Tools

JSX Formatter

Format and beautify JSX/React code with proper indentation

JSX Fixer

Fix broken JSX automatically, repair React component syntax errors, unclosed tags, and invalid expressions

Markdown to JSX Converter

Convert Markdown to React JSX components for blogs and documentation

JSX Validator

Validate JSX syntax and React component structure

JSX Minifier

Minify JSX/React code for production builds

JSX to TSX Converter

Convert JSX to TypeScript TSX with type annotations

JSX to HTML Converter

Convert React JSX to standard HTML

JSX to JavaScript

Convert JSX to React.createElement calls