snapDOM is a fast, accurate DOM-to-image capture tool that converts HTML elements into scalable SVG images. Use for capturing HTML elements, converting DOM to images (SVG, PNG, JPG, WebP), preserving styles, fonts, and pseudo-elements.
Fast, dependency-free DOM-to-image capture library for converting HTML elements into scalable SVG or raster image formats.
Use SnapDOM when you need to:
npm install @zumer/snapdom
# or
yarn add @zumer/snapdom
<script type="module">
import { snapdom } from "https://unpkg.com/@zumer/snapdom/dist/snapdom.mjs";
</script>
<script src="https://unpkg.com/@zumer/snapdom/dist/snapdom.umd.js"></script>
// Create reusable capture object
const result = await snapdom(document.querySelector('#target'));
// Export to different formats
const png = await result.toPng();
const jpg = await result.toJpg();
const svg = await result.toSvg();
const canvas = await result.toCanvas();
const blob = await result.toBlob();
// Use the result
document.body.appendChild(png);
// Direct export without intermediate object
const png = await snapdom.toPng(document.querySelector('#target'));
const svg = await snapdom.toSvg(element);
// Automatically download as file
await snapdom.download(element, 'screenshot.png');
await snapdom.download(element, 'image.svg');
const result = await snapdom(element, {
scale: 2, // 2x resolution
width: 800, // Custom width
height: 600, // Custom height
embedFonts: true, // Include @font-face
exclude: '.no-capture', // Hide elements
useProxy: true, // Enable CORS proxy
straighten: true, // Remove transforms
noShadows: false // Keep shadows
});
const png = await result.toPng({ quality: 0.95 });
| Option | Type | Purpose |
|--------|------|---------|
| scale | Number | Scale output (e.g., 2 for 2x resolution) |
| width | Number | Custom output width in pixels |
| height | Number | Custom output height in pixels |
| embedFonts | Boolean | Include non-icon @font-face rules |
| useProxy | String|Boolean | Enable CORS proxy (URL or true for default) |
| exclude | String | CSS selector for elements to hide |
| straighten | Boolean | Remove translate/rotate transforms |
| noShadows | Boolean | Strip shadow effects |
// Capture at different scales
const mobile = await snapdom.toPng(element, { scale: 1 });
const tablet = await snapdom.toPng(element, { scale: 1.5 });
const desktop = await snapdom.toPng(element, { scale: 2 });
// Hide specific elements from capture
const png = await snapdom.toPng(element, {
exclude: '.controls, .watermark, [data-no-capture]'
});
// Capture with specific size
const result = await snapdom(element, {
width: 1200,
height: 630 // Standard social media size
});
// Fallback for CORS-blocked resources
const png = await snapdom.toPng(element, {
useProxy: 'https://cors.example.com/?' // Custom proxy
});
// Extend with custom exporters
snapdom.plugins([pluginFactory, { colorOverlay: true }]);
// Hook into lifecycle
defineExports(context) {
return {
pdf: async (ctx, opts) => { /* generate PDF */ }
};
}
// Lifecycle hooks available:
// beforeSnap → beforeClone → afterClone →
// beforeRender → beforeExport → afterExport
SnapDOM significantly outperforms html2canvas:
| Scenario | SnapDOM | html2canvas | Improvement | |----------|---------|-------------|-------------| | Small (200×100) | 1.6ms | 68ms | 42x faster | | Medium (800×600) | 12ms | 280ms | 23x faster | | Large (4000×2000) | 171ms | 1,800ms | 10x faster |
git clone https://github.com/zumerlab/snapdom.git
cd snapdom
npm install
npm run compile
npm test
Add helper scripts here for automation, e.g.:
batch-screenshot.js - Capture multiple elementspdf-export.js - Convert snapshots to PDFcompare-outputs.js - Compare SVG vs PNG qualityAdd templates and examples:
scale instead of width/height for better performanceembedFonts: true to ensure custom fonts appear correctlyuseProxy: true if images fail to loadquality: 0.95 for best qualitystraighten: false if transforms are causing issuesembedFonts: trueuseProxy: truescale valuenoShadows: true to skip shadow renderingDelegate coding tasks to Codex, Claude Code, or Pi agents via background process. Use when: (1) building/creating new features or apps, (2) reviewing PRs (spawn in temp dir), (3) refactoring large codebases, (4) iterative coding that needs file exploration. NOT for: simple one-liner fixes (just edit), reading code (use read tool), thread-bound ACP harness requests in chat (for example spawn/run Codex or Claude Code in a Discord thread; use sessions_spawn with runtime:"acp"), or any work in ~/clawd workspace (never spawn agents here). Claude Code: use --print --permission-mode bypassPermissions (no PTY). Codex/Pi/OpenCode: pty:true required.
Control Philips Hue lights and scenes via the OpenHue CLI.
ElevenLabs text-to-speech with mac-style say UX.
Notion API for creating and managing pages, databases, and blocks.
Start voice calls via the OpenClaw voice-call plugin.
Best practices for using the oracle CLI (prompt + file bundling, engines, sessions, and file attachment patterns).
Category:developer