Call snapdom(el) to get a reusable result object — clone once, export many times to SVG, PNG, JPG, WebP, Canvas or Blob, or trigger a download. For a single export, the snapdom.to* shortcut methods do the same in one call. Every method also accepts the full set of capture options.
Usage patterns
| Pattern | When to use |
|---|---|
| snapdom(el) | Reusable — one clone → many exports (PNG + JPG + download). |
| snapdom.toPng(el) | Shortcut — single export, less code. |
Reusable capture
Capture once, export many times (no re-clone):
const el = document.querySelector('#target');
const result = await snapdom(el);
const img = await result.toPng();
document.body.appendChild(img);
await result.download({ format: 'jpg', filename: 'my-capture.jpg' });
One-step shortcuts
Direct export when you need a single format:
const png = await snapdom.toPng(el); const blob = await snapdom.toBlob(el); document.body.appendChild(png);
snapdom(el, options?)
Returns a reusable object with export methods. The capture (deep clone + asset inlining) runs once; each method on the returned object reuses it, so exporting several formats from the same element does not re-clone the DOM.
{
url: string;
toRaw(): string;
toImg(): Promise<HTMLImageElement>; // deprecated
toSvg(): Promise<HTMLImageElement>;
toCanvas(): Promise<HTMLCanvasElement>;
toBlob(options?): Promise<Blob>;
toPng(options?): Promise<HTMLImageElement>;
toJpg(options?): Promise<HTMLImageElement>;
toWebp(options?): Promise<HTMLImageElement>;
download(options?): Promise<void>;
}
toImg() is deprecated — use toSvg() instead.
Shortcut methods
Each shortcut captures and exports in a single call. They accept the same element and the full set of capture options.
| Method | Description |
|---|---|
| snapdom.toImg(el, options?) | Returns an SVG HTMLImageElement (deprecated) |
| snapdom.toSvg(el, options?) | Returns an SVG HTMLImageElement |
| snapdom.toCanvas(el, options?) | Returns a Canvas |
| snapdom.toBlob(el, options?) | Returns an SVG or raster Blob |
| snapdom.toPng(el, options?) | Returns a PNG image |
| snapdom.toJpg(el, options?) | Returns a JPG image |
| snapdom.toWebp(el, options?) | Returns a WebP image |
| snapdom.download(el, options?) | Triggers a download |
Exporter-specific options
Some exporters accept a small set of export-only options in addition to the global capture options.
download()
| Option | Type | Default | Description |
|---|---|---|---|
| filename | string | snapdom | Download name. |
| format | "png" | "jpeg" | "jpg" | "webp" | "svg" | "png" | Output format for the downloaded file. |
Example:
await result.download({
format: 'jpg',
quality: 0.92,
filename: 'my-capture'
});
toBlob()
| Option | Type | Default | Description |
|---|---|---|---|
| type | "svg" | "png" | "jpeg" | "jpg" | "webp" | "svg" | Blob type to generate. |
Example:
const blob = await result.toBlob({ type: 'jpeg', quality: 0.92 });
Ready to capture?
Drop SnapDOM into your project and capture your first element in one line.
Open the demo Install from npm