Grab any component.
Keep every pixel.

Capture live UI — hover states, keyframes, webfonts and all — to clean HTML or JSX in seconds.

beta: 1-minute manual install · Chrome Web Store soon · Chrome 116+

Pro

Everything you need to ship faster

$29/month
  • Unlimited projects
  • Team collaboration
  • Priority support
Get started

What survives the grab

Fluid layouts — %, fr, auto, calc():hover, :focus and :active states@keyframes animations@font-face webfontsShadow DOM — open and closedPseudo-elements ::before / ::afterSVG sprite referencesLive form stateCanvas, frozen as an imageDesign-token var() chainsGradients, masks and filtersResponsive shrink behavior
How it works

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 + styles
02

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.

⌘E
03

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.

Fidelity

Pixel-parity is the whole point.

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 diffon our hardest live benchmark
0.000%pixel diffon most fixture captures
<1stypical capturecold cache, real production sites

Screenshots lie. Hand-rebuilds drift.

Grabby keeps the real thing — here's what makes it through the grab, every time.

  • 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
Export

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.

Get Grabby for Chrome

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