Element Collector

Select any element, collect its HTML/CSS, edit visually, export to HTML/React/Figma, and live-edit page CSS.

Element Collector helps front-end developers grab any button, card, navbar or section from any website and turn it into clean, reusable HTML and CSS. Click the toolbar icon to open the side panel, press Pick element, then click anything on the page. The element is saved to your collection with a thumbnail and a live preview. WHAT YOU GET FOR EVERY ELEMENT - Live preview in the side panel, with Mobile, Tablet and Desktop widths and Light, Dark or Grid backgrounds - Clean HTML with scripts, inline handlers and tracking attributes removed, and all links and image URLs made absolute - CSS generated from the real computed styles, tidied into shorthands, with duplicate rules merged - Hover, focus and active styles, plus ::before and ::after content - Responsive CSS: the @media and @container rules that apply to the element and its children - One-click copy for HTML, CSS, Responsive CSS, or everything together - Download the element as a standalone .html file BUILT FOR SPEED - Up and Down arrow keys move the selection to the parent or child element - Thumbnails of every collected element, so you can find components later - Works with light and dark browser themes PRIVATE BY DESIGN Everything stays in your browser. Collected elements are saved locally with chrome.storage and are never uploaded, sold or shared. There is no account, no analytics and no tracking. FREE AND FUNDED BY DONATIONS Element Collector is free with no ads and no paywall. If it saves you time, you can support development with a donation from the link in the panel. NOTES - Picking works on the top page, not inside iframes - Browser pages such as chrome:// and the Chrome Web Store cannot be inspected - Generated class names such as div-root and button-1 are meant to be renamed to fit your project