what a snapshot contains

one html file that renders the element offline, as it looked on the page: its subtree plus the css that applies to it.

contents#

the element's full subtree, plus the page's own css rules that apply to it, so :hover, transitions, @keyframes, @media and @supports keep working. cross-origin stylesheets are fetched through the extension.

• context: the element's ancestors come along as display: contents wrappers, so selectors like .dark .btn or li:nth-child(2) still match. what it inherits (font, color, css variables), its width and the background behind it are pinned.
• layout: sizes imposed by a flex or grid parent are kept, subgrid tracks are resolved, query containers stay so @container rules match, and viewport units are frozen to the capture-time viewport.
• media: images, css images and the fonts the page loaded are inlined (up to 15 MB). <canvas> (webgl too) and video frames become images; iframes become placeholders.
• shadow dom becomes declarative shadow dom; svg <use> references outside the element are copied in.
• metadata: a json block records the source url, selector, time, viewport, element box, and anything dropped.

nothing runs#

no scripts and no inline handlers. form fields keep their current values; passwords become same-length dummies. links and forms are inert: an href becomes data-el-href (so agents can still read it), a form's action becomes data-el-action, and submit buttons become plain buttons. link styles and :hover still work.

what you see, not just the subtree#

other elements often paint inside the picked box without being part of it: a mockup stacked in the same grid area, a glow behind a heading, a negative-margin overlap. element hit-tests the element's box, and when something else paints there it captures from their nearest common ancestor, clipped to the element's box. fixed and sticky layers (site headers, cookie banners, chat bubbles) never count, and a stray overlap under 2% of the box is ignored.

the text form for agents#

el snapshot <id> --text prints a compact version for an agent's context: images become gray placeholders, fonts are listed but not embedded, unused css rules and variables are left out, and repeated inline svgs are written once (a 746 KB gmail sidebar snapshot becomes 52 KB). past about 60 KB it comes in parts.

known gaps#

• effects that blend with what's behind the element (mix-blend-mode, backdrop-filter) when nothing else paints inside its box
• background images on ancestors (their color is kept)
• css counters that depend on earlier siblings
• content that only appears as you scroll (scroll-driven reveals, virtualized lists) in elements taller than the viewport
• a webgl canvas that doesn't redraw while the snapshot is taken (it reads back blank)
• :host context for elements inside a shadow root