alt·shift·G on any page

Grab any component
from any site.

Grabby captures the exact HTML and CSS of anything you point at — hover states, keyframes, webfonts and all — then hands you a visual editor and clean HTML or JSX.

Add to Chrome — it's freeSee how it works

launching soon on the Chrome Web Store · Chrome 116+

pick → edit → export

Three steps. About ten seconds.

<anything />01

Pick

Hit the toolbar and point. The overlay outlines exactly what you’re grabbing — arrow keys walk the DOM tree, Esc bails, click captures. Full-page mode grabs everything.

layers + styles02

Edit

The capture opens in a visual editor: layers tree, style inspector with per-property reset, double-click text editing, undo/redo, autosave. Preview at desktop, tablet and mobile widths.

⌘E03

Export

Standalone HTML with an inline stylesheet, or a single-file JSX component with scoped classes. Copy it or download it — it compiles and renders as-is.

[grabby] capture timings: 804ms

Pixel-parity is the whole point.

Screenshots lie and hand-rebuilds drift. Grabby diffs every capture against the real thing, pixel by pixel, on live production sites — and treats any visible difference as a bug.

0.48%
pixel diff on our hardest live benchmark
0.000%
on most fixture captures
<1s
typical capture, cold cache

# what survives the grab

  • Fluid layouts — %, fr, auto, calc()
  • :hover, :focus and :active states
  • @keyframes animations
  • @font-face webfonts
  • Shadow DOM — open and closed
  • Pseudo-elements ::before / ::after
  • SVG sprite references
  • Live form state
  • Canvas, frozen as an image
  • Design-token var() chains
  • Gradients, masks and filters
  • Responsive shrink behavior

html · jsx

Code you'd actually commit.

Exports are deterministic and self-contained: styles deduped into scoped classes, shorthands collapsed, fonts and keyframes carried along. The JSX export is a single-file component that compiles without a single edit.

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

// css: the exact captured styles,
// deduped into .g-* classes

Stop rebuilding what already exists.

See a component you like? Grab it, make it yours, ship it.

Add Grabby to Chrome

free · no account needed · captures auto-expire after 30 days