HTML & SVG to JSX Converter

Transform standard HTML and raw SVG into React & Next.js compliant JSX with camelCase attributes and style objects.

HTML / SVG Input:

React JSX Output:

<div className="card-container" id="main">
  {/* User notification banner */}
  <div className="alert alert-info" style={{ marginTop: "12px", fontWeight: "bold" }}>
    <span>Welcome back!</span>
    <img src="/avatar.png" alt="Profile" className="avatar" />
  </div>
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="12" cy="12" r="10"></circle>
    <path d="M12 8v4l3 3"></path>
  </svg>
  <label htmlFor="username">Username</label>
  <input type="text" id="username" className="form-control" tabIndex="1" />
</div>