Pass document.documentElement or a dedicated page wrapper to SnapDOM.
Copy-paste example
Install @zumer/snapdom, select the rendered element, and capture it:
const page = document.documentElement
const capture = await snapdom(page, {
embedFonts: true,
outerShadows: true,
})
await capture.download({ format: 'png', filename: 'full-page' })Why this pattern works
Capturing the root includes the document’s layout beyond the current viewport. A dedicated content wrapper is often preferable when fixed navigation or overlays should be excluded.
Capture content beyond a viewport
This scrollable preview is intentionally tall; capture exports the complete selected DOM subtree.
Hero section
Content rendered below the initial visible area remains part of this DOM element.
Features
Content rendered below the initial visible area remains part of this DOM element.
Customer story
Content rendered below the initial visible area remains part of this DOM element.
Pricing
Content rendered below the initial visible area remains part of this DOM element.
Final call to action
Content rendered below the initial visible area remains part of this DOM element.
Limits and common mistakes
Very large pages create large SVG and bitmap surfaces. For huge or virtualized documents, capture logical sections or render hidden items before capture.
Frequently asked questions
Is this the same as a viewport screenshot?
No. A viewport screenshot captures visible screen pixels; this captures the selected DOM subtree and its layout extent.
Will lazy content be included?
Only content that exists and has resolved. Load or render lazy sections before starting capture.
Capture it in the browser
Install SnapDOM and turn the DOM your users already see into a portable image.
Open the demoInstall from npm