HTML to JSX Converter

About HTML to JSX

JSX looks like HTML and follows different rules. Most of the conversion is renaming: class becomes className, for becomes htmlFor, tabindex becomes tabIndex, and SVG's stroke-width becomes strokeWidth. The renaming is the easy part.

The parts that break pasted markup are handled here. Void elements such as <br> are closed. A style string becomes a style object, keeping custom properties and vendor prefixes. Inline onclick handlers become arrow functions. Braces and angle brackets in text are escaped so they cannot open an expression. Comments become {/* */}. Several top-level elements are wrapped in a fragment.

Whitespace is the subtle one. JSX drops whitespace that contains a line break and keeps whitespace that does not. The space between two inline elements on separate lines has to be written as {" "}, or the words run together. The converter adds it where HTML would have rendered a space.

Where it helps

• Renames all the HTML and SVG attributes React spells differently, including SVG's hyphenated presentation attributes and xlink:href.
• Converts style strings to objects correctly, including custom properties, vendor prefixes and semicolons inside url(…).
• Handles JSX whitespace, adding {" "} where a space would otherwise vanish between inline elements.
• Keeps the case of SVG tag names such as linearGradient and clipPath, which a DOM-based converter would lowercase.
• Runs in the browser, so markup from an unreleased project is not sent anywhere.

Limits

• Inline event handlers become arrow functions around the same code, but they no longer run with this bound to the element. Any handler that uses this needs rewriting.
• It converts markup, not behaviour. Scripts, forms that post and anything that relied on the DOM being HTML will still need to be moved into React's way of doing things.
• Malformed HTML is repaired the simple way, by closing open elements at the next matching end tag. Deeply broken markup is best run through the HTML formatter first.

Frequently asked questions

Why does React need className instead of class?

JSX compiles to JavaScript object properties, and early JavaScript did not allow reserved words such as class and for as property names. React named the props after the DOM properties, className and htmlFor, and kept those names.

Why did value become defaultValue?

In React, an input with value and no onChange handler is controlled and read-only: typing does nothing. defaultValue sets the starting value and lets the field be edited, which is what the HTML did. To control the field, change it back to value and add an onChange handler.

What is the {" "} in the output?

An explicit space. JSX removes whitespace that contains a line break, so when inline elements sit on separate lines, the space between them would disappear. Writing it as an expression keeps it.

Does the output work in TypeScript?

Yes, the markup is valid in a .tsx file as it is. The only thing TypeScript may ask for is a type on the event parameter of a converted handler, such as React.MouseEvent<HTMLButtonElement>.

Related tools

• HTML Formatter — Indent and tidy HTML markup
• SVG to CSS Converter — Turn an SVG into a data URI for CSS or an img tag
• CSS Unit Converter — px, rem, em, percentages and viewport units, with a preview
• Minifier — Shrink CSS, HTML or JavaScript
• CSS Formatter — Format stylesheets with consistent indentation
• JavaScript Formatter — Re-indent JavaScript and TypeScript source

More Web Development tools

• HTML Formatter — Indent and tidy HTML markup
• CSS Formatter — Format stylesheets with consistent indentation
• JavaScript Formatter — Re-indent JavaScript and TypeScript source
• SCSS/SASS Formatter — Format SCSS syntax and nested rules
• TypeScript Formatter — Format TypeScript source code
• SQL Formatter — Format SQL statements with dialect selection
• SQL Minifier — Collapse formatted SQL into compact text
• CSS Unit Converter — px, rem, em, percentages and viewport units, with a preview
• Query String Parser and Builder — Convert query strings into editable key-value data
• CSP Generator — Build a Content-Security-Policy, or check one, and write it for your server or framework
• CORS Generator — Write CORS configuration for nginx, Express, Go, Django, ASP.NET, Spring and more, and test an origin against it
• cURL Builder — Build an HTTP request and get it as curl, JavaScript, TypeScript, Go, Python, PHP, C#, Java and more
• Minifier — Shrink CSS, HTML or JavaScript
• Flexbox Playground — Try every flex property and read the CSS back
• CSS Grid Playground — Build a grid template and see the tracks it makes
• Responsive Viewport Tester — Render your markup at phone, tablet and desktop widths
• SVG Path Viewer — Draw path data and read back what it contains
• SVG to CSS Converter — Turn an SVG into a data URI for CSS or an img tag
• OAuth 2.0 / OIDC Helper — PKCE verifiers and challenges, state, nonce, and checking what came back
• Regex Tester — Test patterns, inspect groups and preview replacements
• User-Agent Parser — Identify the browser, engine, operating system and device behind a User-Agent string
• HTTP Status Codes — Look up what a status code means, when to send it, and whether it is cached or safe to retry
• Semver Checker — Test versions against npm ranges, sort them by precedence, and see what each bump produces
• Cookie Parser and Builder — Read Set-Cookie and Cookie headers, check them against browser rules, and write one for your framework