snapdom

Name: snapdom
Availability: InStock
Author: 2025emma

Convert HTML elements into SVG, PNG, JPG, or WebP images.

22.7k|2.4k|Updated Dec 17, 2025

Search Tags:#image #SVG #PNG #DOM #snapdom

Ready to run

npx skills add https://github.com/2025Emma/vibe-coding-cn --skill snapdom

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: snapdom
Source: https://github.com/2025Emma/vibe-coding-cn/tree/main/i18n/en/skills/snapdom
Command: npx skills add https://github.com/2025Emma/vibe-coding-cn --skill snapdom

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

SnapDOM provides rapid, dependency-free DOM-to-image capture, converting HTML elements into scalable SVGs or raster images while preserving styles and fonts.

Core Features & Use Cases

Export Formats: SVG, PNG, JPG, WebP, Canvas, Blob
Style & Font Preservation: embedded fonts, shadows, and pseudo-elements
Advanced Options: proxy for CORS, element exclusion, straightening transforms

Quick Start

Install via NPM/Yarn or CDN and run a basic capture of a target DOM element.

Frequently Asked Questions about snapdom

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I convert HTML DOM elements to SVG or PNG images?▼

SnapDOM converts HTML elements into SVG or raster images (PNG, JPG, WebP) directly in the browser using standard Web APIs. Select your target element, call the capture function, and export in your chosen format—no external dependencies required.

Can I export DOM screenshots with embedded fonts and styles preserved?▼

Yes. SnapDOM captures styled DOM including embedded fonts, pseudo-elements, and shadows. Fonts are embedded directly in the SVG or raster output, ensuring your design renders identically across different environments.

How do I handle CORS issues when capturing images with external resources?▼

SnapDOM includes a proxy option to route external resources through a CORS-compatible endpoint. Enable the useProxy setting to bypass CORS restrictions when capturing elements with cross-origin images or fonts.

Can I customize the size and scale of captured images?▼

SnapDOM supports custom dimensions and scaling options. Set width, height, and scale parameters to control output resolution and size, allowing you to generate thumbnails, previews, or high-resolution exports from the same element.

What elements can I exclude from the capture?▼

Use the exclude option to omit specific DOM elements from your capture. This lets you hide UI controls, watermarks, or unwanted content before exporting, keeping your screenshot clean without modifying the live page.

Does SnapDOM support custom plugins or extensions?▼

Yes. SnapDOM has an extensible plugin system, allowing you to extend functionality with custom behavior. Plugins integrate into the capture pipeline to add processing, filtering, or format-specific transformations.