How to Turn a Web Page Element Into a React Component

Paste some HTML into an online converter and it hands back JSX in under a second. The result compiles, renders, and looks nothing like what you copied — because the converter did the easy half. Renaming attributes is a find-and-replace. Deciding where a component’s styles live, and making them survive contact with your codebase, is the actual work.

The conversion has two halves

The markup half is syntax: JSX is JavaScript, so anything that collides with a JavaScript keyword or a DOM property name has to be renamed. That is a closed list, and tooling handles it perfectly.

The styles half is architecture. The CSS you want is scattered across a stylesheet, a :root block of custom properties, a @font-face declaration and possibly a media query — and you have to decide how much of that comes into your project and under what names. No converter can decide that for you, which is why none of them try.

This article assumes you already have the CSS in hand. Getting the HTML and CSS off the page in the first place is its own set of problems, and worth reading first if the styles you copied came back incomplete.

Half one: the markup

Six rules cover essentially every conversion:

1. class becomes className and for becomes htmlFor. Both are reserved words in JavaScript.
2. Hyphenated attributes become camelCase: tabindex → tabIndex, srcset → srcSet, maxlength → maxLength. SVG follows the same rule — stroke-width → strokeWidth, viewBox keeps its capital B. The exceptions are data-* and aria-*, which stay hyphenated.
3. Every tag closes. <br>, <img>, <input> and <hr> become self-closing.
4. Inline styles become objects with camelCase keys: style="font-size:14px" becomes style={{ fontSize: '14px' }}. Numeric values get px added automatically for most properties, but being explicit costs nothing and removes a class of surprise.
5. Comments change shape. <!-- … --> becomes {/* … */}.
6. Boolean attributes need values. disabled becomes disabled{true} or just disabled; checked on an input requires an onChange handler or React warns.

The React DOM reference lists every attribute with its React name, and is the authority when something behaves oddly.

Half two: where the styles go

You have a block of CSS and a component. There are four places the CSS can live, and the choice has consequences.

That last limitation is worth stating plainly: React’s style prop sets inline styles, and inline styles have no way to express :hover, :focus, ::before, a media query or a @keyframes block. Any conversion that flattens everything into style objects has thrown away every interactive state in the component.

Scoping, and why it matters

Copied components arrive with names their original authors chose: .card, .button, .title, .container. Your project has those too. Drop the copied CSS into a global stylesheet and whichever rule loses the cascade loses silently — no error, no warning, just a component somewhere else that now has the wrong padding.

Three ways out, in order of how much work they are:

• CSS Modules. Name the file Card.module.css and the build tool rewrites every class to something unique. You then reference them as styles.card, which means editing the markup — but the scoping is free and permanent.
• Prefix everything. Rewrite .card to .pricing-card__card throughout. Crude, works everywhere, tedious past about twenty selectors.
• Generated names. Rewrite each rule to a machine-generated class — .g-1, .g-2 — and update the markup to match. Ugly to read and impossible to collide with, which for a lifted component is usually the right trade.

Four traps

1. dangerouslySetInnerHTML

The tempting shortcut is to skip conversion entirely and inject the HTML string. It works, and it costs you everything React is for: no component boundaries, no props, no event handlers, no reconciliation. It is also an injection risk the moment any part of that string comes from somewhere you do not fully control. Convert the markup properly.

2. Fragments and the single root

A component returns one node. If your copied markup is three sibling elements, wrap them in a fragment — <>…</> — rather than adding a <div>. An extra wrapper changes the layout when the parent is a flex or grid container, and that is a bug you will spend an hour on.

3. Whitespace

JSX collapses whitespace between elements differently from HTML. Two inline elements on separate lines in JSX render with no space between them, where the same HTML would have one. If words run together after conversion, that is why — {' '} puts the space back explicitly.

4. Assets with relative paths

Copied markup references images, icons and fonts relative to the original site. Once the component is in your project those paths resolve to nothing. Every src, href, url() and SVG xlink:href has to be re-pointed at an asset you control — and SVG sprite references are the ones people miss, because a broken sprite renders as an empty box rather than a broken-image icon.

The whole pipeline

Here is what a finished, self-contained component looks like — the styles travel with it, the class names cannot collide, and it renders correctly with no props and no global CSS:

const css = `
.g-1 { display: flex; flex-direction: column; gap: 12px;
       padding: 24px; border-radius: 12px; border: 1px solid #e5e7eb;
       background: #ffffff; font-family: Inter, system-ui, sans-serif; }
.g-2 { font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
       text-transform: uppercase; color: #6b7280; }
.g-3 { font-size: 32px; font-weight: 700; color: #111827; }
.g-4 { padding: 10px 16px; border: 0; border-radius: 8px;
       background: #2563eb; color: #ffffff; font-weight: 600;
       cursor: pointer; transition: background 150ms ease; }
.g-4:hover { background: #1d4ed8; }
.g-4:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
`;

export default function PricingCard() {
  return (
    <div className="g-1">
      <span className="g-2">Pro</span>
      <h3 className="g-3">$19/mo</h3>
      <button type="button" className="g-4">
        Start free trial
      </button>
      <style>{css}</style>
    </div>
  );
}

Three things to notice:

• The :hover and :focus-visible rules are real CSS in the stylesheet, which is the only way they can exist. An inline style object cannot hold them.
• The class names are generated, so nothing in the host project can collide with them.
• The <style> tag inside the component means the file has no external dependency at all. Useful for a lifted component; you would move the CSS out once it settles into your codebase.

Automating it

Doing all five stages by hand is a genuinely useful exercise once. After that it is repetitive work with a predictable failure mode: you forget the @font-face, or the ::before, or a var() that resolved to nothing.

Grabby produces exactly the file above. It captures the element with its resolved styles, pseudo-classes, keyframes, fonts and pseudo-elements; you edit it visually if you want to — layers tree, style inspector, desktop/tablet/mobile preview — and export as a single-file JSX component with the CSS deduplicated into generated .g-* classes, or as standalone HTML. Copy to the clipboard or download the file. Capturing and editing are free; export is the paid part.

Either way, the component you end up with is a starting point rather than a finished one. The next hour is spent turning hardcoded strings into props, replacing the copied colours with your own tokens, and deleting the three wrapper divs that existed for a layout you are not using.

Worth checking before any of that: whether you needed a component at all. Converting is the right move when someone is going to build with it — the capture-format comparison is the two-minute version of that decision, and an image is frequently the correct answer.

Before you commit it

• It renders with no props. Drop it into a blank route and look at it. If it needs context, a provider or a global stylesheet, it is not self-contained yet.
• The styles are scoped. Search your project for each class name it uses. Any hit is a future bug.
• Fonts are declared and licensed. Either the @font-face came along and you have the right to use it, or you have substituted something you own.
• Hover, focus and active still work. Tab to it as well as hovering — a component with no visible focus state is inaccessible, and that is often what gets lost in conversion.
• Images and icons resolve. Check the network panel for 404s, and look specifically for SVG sprite references.
• No dangerouslySetInnerHTML. If it is still there, the conversion is not finished.
• It passes your linter and formatter with the project’s own rules, not with exceptions added for it.