A comprehensive DOM capture engine that transforms web elements into high-fidelity images or canvas objects while preserving complex styles and Shadow DOM.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install snapdom
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install snapdom using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is snapdom?
snapdom is a versatile DOM capture engine designed to export any part of a web page into various formats including SVG, PNG, JPG, WebP, and Canvas. Unlike basic screenshot tools, it intelligently handles inline styles, web fonts, background images, pseudo-elements, and even complex Shadow DOM structures to ensure the output matches the visual state of the browser perfectly.
Built for developers who need precision and flexibility, this utility within the Openclaw Skills ecosystem allows for both quick, one-off exports and reusable capture instances. By cloning the DOM once and offering multiple export methods, it optimizes performance for generating various assets from a single state of a web element.
snapdom Use Cases
- Creating automated website thumbnails or element previews for dashboards.
- Generating social media share cards directly from HTML and CSS components.
- Exporting complex data visualizations or charts as high-resolution PNG or JPG files.
- Archiving specific web page states for documentation or visual regression testing.
- Converting dynamic DOM nodes into downloadable assets for end-users.
How snapdom Works
- The engine identifies the target DOM element and its nested children, including Shadow roots.
- It clones the DOM subtree to a temporary off-screen container to avoid disrupting the live UI.
- Inline styles, computed CSS variables, and external assets like fonts and images are processed and embedded.
- The engine renders the cloned node into a vector SVG or a raster Canvas context based on the desired output.
- Post-processing filters or plugins are applied (e.g., watermarks, grayscale) during the rendering lifecycle.
- The final asset is exported as a Data URL, Blob, or triggered as a file download.
snapdom Setup
To integrate this into your project via NPM:
npm i @zumer/snapdom
Alternatively, for quick prototyping or browser-based Openclaw Skills, use a CDN:
<script src="https://unpkg.com/@zumer/snapdom/dist/snapdom.js"></script>
snapdom Data Schema & Taxonomy
The skill accepts configuration objects and produces standardized web media types. Below is the primary schema for capture options:
| Property | Type | Description |
|---|---|---|
| scale | number | Resolution multiplier (e.g., 2 for Retina quality). |
| quality | number | Compression level for JPG and WebP (0.0 to 1.0). |
| embedFonts | boolean | Whether to serialize and include non-system fonts. |
| exclude | string[] | Array of CSS selectors to remove from the output image. |
| filter | function | A predicate to skip specific elements during the cloning process. |
snapdom Advanced Features
- Shadow DOM and Pseudo-element Support: Fully captures elements inside Web Components and complex CSS decorations.
- Reusable Capture Instances: Minimize overhead by cloning a node once and calling multiple export methods like
.toPng()or.toBlob()on the result. - Plugin Lifecycle Hooks: Inject custom logic at specific stages including beforeSnap, afterClone, and beforeExport.
- Cross-Origin Image Handling: Built-in support for CORS proxy URLs to capture images hosted on different domains.
- High-Density Rendering: Easy scaling for high-DPI displays to ensure crisp, professional-grade screenshots.
SKILL.md
Loading
Related Openclaw Skills
Media Content Generator
Generate high-quality promotional videos and media content from images, audio, and clips using an AI-powered cloud rendering pipeline.
Secrets Scanner
A specialized security tool designed to identify and flag hardcoded secrets, API keys, and sensitive credentials within your source code.
API Cost Tracker
A comprehensive utility for tracking, analyzing, and optimizing AI API expenditures across major LLM providers to minimize unnecessary spending.
Skylv Metacognition Engine
A framework that enables AI agents to monitor their own reasoning, detect biases, and improve decision quality through structured self-examination loops.
Drunk Mode Skill
A sophisticated persona-shifting skill that applies a logical yet slightly tipsy conversational style to AI agents.
Error Monitoring Agent
A comprehensive error monitoring and alerting system designed to detect, track, and automatically resolve exceptions for AI agents in real-time.
Featured*
