2025emma
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.
bunx add-skill 2025emma/vibe-coding-cn -s snapdomLoadingβ¦
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 |
// 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 rendering| CSS selector for elements to hide |
straighten | Boolean | Remove translate/rotate transforms |
noShadows | Boolean | Strip shadow effects |
Use when you need to run Flow type checking, or when seeing Flow type errors in React code.
Use when you want to validate changes before committing, or when you need to check all React contribution requirements.
Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging channel-specific test failures, or adding new flags to React.
Use when you need to check feature flag states, compare channels, or debug why a feature behaves differently across release channels.