Darnly
Free tools

HTML to JSX: paste HTML, get React code

Paste any HTML and get JSX you can drop into a React component, with a live preview so you know you copied the right piece. It runs in your browser, so nothing is uploaded.

Free from Darnly. Spot a bug in the app you're building? Darnly hands it to Claude Code, Codex or Cursor in one key.Add to Chrome

What it looks likeLive preview

Paste HTML to get JSX

    JSX
    More free tools
    See all 89 tools
    How it works
    1. Paste HTML into the box, for example a template, a snippet from a UI kit, or something you copied from a website. Or start from the example that’s already there.
    2. Check the preview to see it’s the right piece. The JSX appears next to it right away, with every fix listed on top: class to className, styles to objects, tags closed, comments and SVG attributes fixed.
    3. Copy the JSX, or copy the prompt and paste it into Claude Code, Cursor or Codex so your agent adds it to your project as a component.
    Questions
    Is my HTML sent anywhere?
    No. The conversion runs in your browser. Your HTML never leaves your computer.
    Why can’t I paste HTML straight into React?
    JSX looks like HTML but has different rules. class is a reserved word in JavaScript so it’s className, style takes an object instead of text, every tag must be closed (<br />), comments are written {/* like this */}, and SVG attributes like stroke-width become strokeWidth. This tool does all of that for you.
    What does “Wrap in a component” do?
    It puts the JSX inside export default function YourName() { return (…) }, so you can save it as a file like YourName.jsx or YourName.tsx and use it as <YourName />. Untick it to get only the JSX.
    What does “Inline styles to Tailwind” do?
    If your project uses Tailwind, it moves inline styles into Tailwind classes when there’s a class that means the same thing, like display: flex to flex or padding: 16px to p-4. Anything without an exact class stays in style, so nothing changes how it looks.
    Why did value become defaultValue?
    In React, an input with value can’t be typed into unless you also handle changes. defaultValue (and defaultChecked for checkboxes) keeps the field working like it did in plain HTML.
    What happens to scripts and onclick?
    Scripts don’t run when React renders them, and inline onclick="…" code becomes an arrow function like onClick={() => { … }}. The tool warns you when it sees either, so you or your agent can move that code into the component.
    The preview looks plain. Is something wrong?
    The preview shows your HTML with its inline styles and <style> tags. Classes from Tailwind, Bootstrap or your own CSS files won’t show here because those files aren’t loaded, but the JSX keeps every class.