HTML to JSX

Convert HTML to React JSX: class to className, inline styles to objects, self-closing tags and comments. Optionally wrap it in a component.

About this tool

Convert HTML to React JSX. Attributes are renamed (class → className, for → htmlFor), inline styles become objects, void tags self-close and comments become JSX comments.

How to use

Paste HTML.
Optionally enable Wrap in component.
Copy the JSX into your React code.

Frequently asked questions

What about multiple root elements?

They are wrapped in a fragment <>…</> so the result is valid JSX.

Are event handlers converted?

onclick becomes onClick, but the value stays a string. Replace it with a function in your component.

How are curly braces in text handled?

They are escaped as {'{'} and {'}'} so JSX does not treat them as expressions.

Related tools

HTML Entity Encode / Decode – Escape and unescape HTML entities
HTML Preview – Render HTML in a sandboxed frame
SVG to CSS – Turn SVG markup into a CSS background data URI

Format

JSON Format / Validate – Pretty-print, minify and validate JSON
Line Sort / Dedupe – Sort, dedupe, reverse and trim lines

Encode / Decode

Base64 Encode / Decode – Convert text to and from Base64 (UTF-8)
URL Encode / Decode – Percent-encode or decode URL components
HTML Entity Encode / Decode – Escape and unescape HTML entities
Base64 Image Encode / Decode – Turn images into data URIs and preview Base64 images
Backslash Escape / Unescape – Escape quotes, newlines and control characters
Hex ↔ ASCII – Convert text to hexadecimal bytes and back
JWT Debugger – Decode JSON Web Token header and payload

Generate

UUID / ULID Generate / Decode – Generate UUID v4 / v7 and ULID, and decode existing IDs
Hash Generator – MD5, SHA-1, SHA-256, SHA-384 and SHA-512 digests
Random String Generator – Cryptographically secure random strings
Lorem Ipsum Generator – Placeholder text in paragraphs, sentences or words
QR Code Generate / Read – Create QR codes and read them from images

Convert

World Time Converter – Convert a time between time zones; starts from this computer's current time
Unix Time Converter – Convert Unix timestamps and date strings
Number Base Converter – Convert between binary, octal, decimal and hex
YAML ↔ JSON – Convert YAML to JSON and back
CSV ↔ JSON – Convert CSV to JSON and back
HTML to JSX – Convert HTML markup into React JSX
Query String ↔ JSON – Convert URL query strings to JSON and back
URL Parser – Split a URL into its parts and query parameters
Color Converter – Convert between HEX, RGB, HSL, HWB and CMYK
SVG to CSS – Turn SVG markup into a CSS background data URI
JSON ↔ PHP Array – Convert JSON to PHP array syntax and back
PHP Serialize / Unserialize – Convert JSON to PHP serialize() format and back

Text

RegExp Tester – Test regular expressions and inspect matches
String Case Converter – camelCase, snake_case, kebab-case and more
String Inspector – Count characters, bytes, words and inspect code points
Text Diff Checker – Compare two texts by line, word or character

Inspect

Cron Job Parser – Explain cron expressions and list upcoming run times
cURL Analyzer – Break down a cURL command and convert it to fetch()
X.509 Certificate Decoder – Inspect PEM certificates and chains

Preview

Markdown Preview – Render GitHub-flavored Markdown
HTML Preview – Render HTML in a sandboxed frame