Media
3 items
Description
Extract design tokens, CSS, accessibility data and animations from any element on any page. Component Grabber is the ultimate developer tool for extracting everything you need to recreate any UI component — design tokens, CSS rules, accessibility data, animations, assets, and more — directly from any website. Select any element, get a full component breakdown in a clean side panel, and export production-ready specs in seconds. Stop manually digging through DevTools. Stop copying CSS one property at a time. Component Grabber gives you the complete picture with a single click. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HOW IT WORKS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1. Click the Component Grabber icon in your toolbar (or press Alt+Shift+C) 2. Hover over any element on the page — a blue highlight overlay shows exactly what you're targeting 3. Click to select the element 4. The side panel instantly displays a complete component breakdown: HTML, CSS, design tokens, accessibility data, assets, and more 5. Copy what you need in one click — as raw code, AI-ready prompts, or framework-specific formats That's it. No setup, no configuration, no learning curve. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ELEMENT PICKER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ The element picker overlays the page with a visual highlight that follows your cursor: • Blue border and background on the hovered element • Tag label showing tag name, ID, and class names • Full DOM path showing your position in the page structure After selecting, you can: • Navigate ancestors via the breadcrumb Target Bar • Toggle "Element Only" vs "Element + Children" scope • Press Escape to switch between picking and selection modes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HTML EXTRACTION ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Complete HTML structure with syntax highlighting, line count, file size, and DOM metadata (tag, ID, classes, child count, URL, ancestor path). One-click copy to clipboard. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ CSS EXTRACTION (Pro) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ This is where Component Grabber really shines. The CSS extraction engine pulls every style that affects your selected element: MATCHED CSS RULES Every CSS rule that applies to the selected element, with the source file URL or "inline" attribution. You see exactly which stylesheet each rule comes from and in what order they cascade. CSS VARIABLES All custom properties (--var-name) resolved from both :root and element-level scopes. See the variable name and its computed value side by side. Essential for understanding design systems. INLINE STYLES Any styles applied directly via the style attribute on each element. COMPUTED STYLES The final, non-default computed properties from getComputedStyle(). This strips out all browser defaults, showing you only the styles that actually matter — the ones that make this element look the way it does. MEDIA QUERIES All responsive breakpoint rules that apply to the element, sorted by breakpoint value. See exactly how the element adapts at different screen sizes. ANIMATIONS & TRANSITIONS Complete animation details including: • CSS keyframe animations with the full @keyframes CSS text • CSS transitions with property, duration, and timing function • Pseudo-state styles for :hover, :focus, and :active • Pseudo-element styles for ::before and ::after ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ DESIGN TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Component Grabber automatically extracts and categorizes the design tokens used by the selected element. This is invaluable for building or auditing design systems. COLORS Every color value used by the element — extracted from CSS rules and computed styles. Supports hex, rgb/rgba, hsl/hsla, and oklch formats. See all the colors at a glance to understand the element's color palette. SPACING Margin, padding, gap, row-gap, and column-gap values in px and rem. Instantly understand the spacing system used by the component. TYPOGRAPHY Font families, font sizes (in px), and font weights extracted from getComputedStyle(). Map out the typographic scale used across components. BORDER RADIUS All border-radius values collected from the element and its children. Useful for documenting the rounding conventions in a design system. BOX SHADOWS Every box-shadow value used, with "none" values filtered out. Capture the elevation system at a glance. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ACCESSIBILITY ANALYSIS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Built-in accessibility auditing helps you catch issues before they reach production. The a11y panel analyzes the selected element and its children for: ARIA ROLES Lists every element with an explicit role attribute so you can verify the semantic structure is correct. ARIA LABELS Shows all aria-label and aria-labelledby attributes to ensure interactive elements are properly labeled for screen readers. TAB ORDER Displays all focusable elements with their tabindex values. Flags anti-patterns like positive tabindex values that can break natural keyboard navigation. HEADING STRUCTURE Validates the heading hierarchy (h1 through h6) and detects level skipping. For example, jumping from h2 directly to h4 is flagged because it can confuse assistive technology users. AUTOMATED ISSUE DETECTION Component Grabber checks for common accessibility violations: • Missing alt text on images • Buttons and links without accessible text or aria-label • Inputs without associated labels or aria-label • Color contrast ratio failures against WCAG AA minimum (4.5:1 for normal text) • Missing lang attribute on the html element • Heading level skips (e.g., h2 followed by h4) • Positive tabindex values (an anti-pattern that disrupts focus order) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ASSET EXTRACTION ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Grab every visual asset from the selected component: IMAGES Extracts all <img> elements with their src URL, alt text, and natural dimensions (width × height). SVGS Captures inline SVG elements with viewBox parsing and calculated dimensions. Get the full SVG markup ready to use. BACKGROUND IMAGES Extracts CSS background-image URLs from computed styles. Catches background images that DevTools can make hard to find. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ JAVASCRIPT & FRAMEWORK DETECTION ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Understand the behavior layer of any component: INLINE EVENT HANDLERS Detects onclick, onchange, oninput, onsubmit, onmouseover, onmouseout, onkeydown, onkeyup, onfocus, onblur, onload, onerror, onscroll, onresize, and ontouchstart handlers. DATA ATTRIBUTES Captures all data-* attributes as structured JSON. See the data layer that powers the component's behavior. FRAMEWORK DETECTION Automatically detects React, Vue, Angular, and Svelte components. When detected, it extracts: • React: component props and fiber state • Vue: component instance data and props • Angular: component properties • Svelte: component context ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ANIMATION RECORDER (Pro) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Capture hover-triggered CSS animations frame by frame with millisecond precision. When you record an animation, Component Grabber: 1. Captures the element's "before" state (all watched CSS properties) 2. Simulates a hover event to trigger the transition 3. Records every frame via requestAnimationFrame 4. Captures the "after" state once the animation completes The output includes: • Before and after property states for easy comparison • Frame-by-frame animation data with timestamps • Property diffs showing exactly what changed • The original CSS transition definitions Watched properties include: opacity, transform, background-color, color, border-color, box-shadow, border-radius, padding, margin, width, height, font-size, letter-spacing, gap, and more. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SCROLL EFFECTS RECORDER (Pro) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Capture scroll-triggered animations by simulating 20 scroll steps (0-100%). Tracks opacity, transform, colors, dimensions, positioning, sticky detection, scroll-snap, and viewport enter/exit. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SCREENSHOT CAPTURE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Pixel-perfect, cropped screenshot of the selected element at device pixel ratio. Copies to clipboard automatically (or downloads as PNG). Attaches to AI prompts as visual reference. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ EXPORT FORMATS (Pro) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Copy your extracted component data in the format you need: AI PROMPT A production-grade frontend specification designed for LLMs (ChatGPT, Claude, GitHub Copilot, etc.). The AI prompt includes: • Complete component structure and styling data • WCAG 2.2 AA accessibility standards baked in • Semantic HTML rules and best practices • Instructions for the AI to reference the attached screenshot • Framework-agnostic specification that any LLM can interpret This is the fastest way to go from "I like that component" to "I have that component in my codebase." FRAMEWORK PRESETS • React + Tailwind CSS — component data formatted for React/JSX with Tailwind utility classes • Vue + Tailwind CSS — formatted for Vue single-file components • Svelte — formatted for Svelte components • Vanilla HTML/CSS — plain HTML and CSS, no framework dependencies RAW EXPORT All extracted data combined in a single copyable text block. Useful when you want everything in one place. JSON EXPORT Complete extraction data as a downloadable JSON file. Ideal for programmatic processing, design system tooling, or archiving component specs. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ KEYBOARD SHORTCUTS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • Alt+Shift+C — Activate component picker • Cmd+Shift+G — Toggle picker on/off • Cmd+Shift+A — Copy AI prompt • Cmd+Shift+C — Quick copy (raw format) • Cmd+E — Export as JSON • Escape — Toggle between picking and selection modes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SETTINGS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • Computed styles — include/exclude computed CSS properties • Clean class names — strip framework-generated classes • Pseudo-elements — include/exclude ::before and ::after • Pretty print — formatted output with indentation • Inline styles to classes — convert inline styles to CSS classes All preferences persist across sessions. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ WHO IS THIS FOR? ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • Frontend developers recreating components from existing sites • Design system teams cataloging tokens across products • Accessibility engineers auditing WCAG compliance • Developers using AI code generation (ChatGPT, Claude, Copilot) with structured specs • UI/UX designers verifying live implementations match designs • Students learning how real-world components are built ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FREE VS PRO ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FREE (no account required) ✓ Element picker with visual highlighting ✓ HTML extraction with syntax highlighting ✓ Design token extraction (colors, spacing, typography, radii, shadows) ✓ Asset extraction (images, SVGs, background images) ✓ JavaScript & framework detection ✓ Full accessibility analysis ✓ Screenshot capture ✓ Settings customization ✓ Keyboard shortcuts PRO (one-time license key) ✓ Everything in Free, plus: ✓ Full CSS extraction (matched rules, variables, computed, media queries, animations) ✓ Animation recorder (hover-triggered, frame-by-frame) ✓ Scroll effects recorder (scroll-driven animations) ✓ Export as AI prompt, React, Vue, Svelte, Vanilla, or Raw ✓ JSON export ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ TECHNICAL DETAILS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • Built with Manifest V3 for full compatibility with the latest Chrome • Side Panel API (Chrome 114+) for a non-intrusive UI alongside the page • Content script injects only when you click the icon — no background scanning • All page data processing happens locally in your browser • License validation uses HTTPS encryption • No analytics, no tracking, no telemetry • Lightweight: under 105 KB total package size ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SUPPORT ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Questions, feedback, or feature requests? Reach out on X/Twitter: https://x.com/hmqiwt Works on any website. Built for developers who move fast.