ZeroServer.tools

HTML to JSX Converter

Convert HTML to JSX — class to className, inline styles to objects, and self-closed tags.

HTML

JSX

<div className="card" style={{ backgroundColor: '#0ea5e9', padding: '16px' }}>
  {/* a greeting */}
  <label htmlFor="name">Name</label>
  <input type="text" id="name" maxLength="20" autoComplete="off" />
  <img src="/logo.png" alt="logo" />
  <br />
</div>

Turning HTML into JSX

JSX looks like HTML but follows JavaScript's rules, so a handful of attributes have to change when you paste markup into a React component. This converter renames class to className and for to htmlFor, converts inline style strings into style objects with camelCased properties, turns HTML comments into {/* */} comments, and self-closes void elements like <br> and <img>. It covers the common cases — review the output for unusual markup.

Tidy the markup first with the HTML formatter, or go the other way and build types from data with JSON to TypeScript. All conversion runs locally in your browser.

Private & free — this tool runs entirely in your browser.