Super Boring Tools

Search tools

Find a tool by name or what it does.

HTML to JSX Converter

Paste an HTML snippet and get valid JSX. Class becomes className, for becomes htmlFor, inline styles become style objects, and void tags self-close.

Converted to JSX live as you type. Nothing leaves your browser.

Output options

Indentation

JSX

Your JSX will appear here.

Attributes are renamed, void tags self-close, and curly braces in text are escaped.

How to convert HTML to JSX online

  1. Paste your HTML

    Drop an HTML snippet into the input, and the matching JSX appears live as you type.

  2. Set the output shape

    Choose whether to wrap the result in a functional component, pick the indent size, and keep or strip comments.

  3. Review the JSX

    Check the renamed attributes, style objects, and self-closed tags in the output panel.

  4. Copy or download

    Copy the JSX to your clipboard or download it as a .jsx file to drop into your project.

Why use this tool

Attribute renaming

Renames class to className and for to htmlFor, camelCases names like tabindex and stroke-width, and leaves data and aria attributes untouched.

Inline styles to objects

Turns a style string into a style object with camelCased keys, so color and font-size become color and fontSize, and custom properties are kept quoted.

Valid JSX every time

Self-closes void tags like img, br, and input, escapes curly braces in text, decodes HTML entities, and writes boolean attributes the way JSX expects.

Component and indent options

Optionally wrap the markup in a named functional component, and choose two spaces, four spaces, or tabs for indentation.

Comments and multiple roots

Comments can be kept as JSX comments or stripped, and several top-level elements are wrapped in a fragment automatically.

Runs entirely in your browser

Everything happens on your device. Nothing is uploaded, so private markup and templates stay local.

About this tool

This tool converts an HTML snippet into JSX you can paste straight into a React component. It reads your markup, renames the attributes React expects, such as class to className and for to htmlFor, camelCases the rest like tabindex and stroke-width, and self-closes void tags like img, br, and input so the result is valid JSX.

It handles the parts that usually trip people up. Inline style strings become style objects with camelCased property names, HTML entities are decoded to their characters, curly braces in text are escaped so they are not read as expressions, and boolean attributes like disabled and checked are written the way JSX wants them. When your snippet has more than one top-level element, they are wrapped in a fragment, and comments can be kept as JSX comments or stripped. You can also wrap the whole result in a named functional component and set the indent to two spaces, four spaces, or tabs.

Paste raw markup copied from a page, a design export, or an email template, and get a component body in seconds. You can tidy the markup first with the HTML formatter, or go the other direction and turn a page into Markdown with HTML to Markdown. Everything runs on your device, so private templates never leave the browser.

Frequently asked questions

How does the conversion work?
Your HTML is parsed into a tree, then each element is rewritten as JSX: attributes are renamed and camelCased, inline styles become style objects, void tags self-close, and text is escaped where needed. The output updates live as you edit the input.
What happens with multiple top-level elements?
JSX allows only one root, so when your snippet has several top-level elements they are wrapped in a fragment. A single root element is emitted on its own without an extra wrapper.
How are inline event handlers converted?
An attribute like onclick is renamed to its React form such as onClick, and the value is kept as a string. Replace that string with a real function reference in your component, since JSX expects a function, not inline code.
Does it handle inline styles and boolean attributes?
Yes. A style string is split into a style object with camelCased keys, and boolean attributes such as disabled, checked, and required are written bare, which JSX reads as true.
Is my data uploaded anywhere?
No. Everything runs in your browser. Your HTML never leaves your device, is never sent to a server, and is not stored or logged.

Related tools