snapdom

Name: snapdom
Availability: InStock
Author: bearflower

Convert HTML elements into SVG or raster images with embedded fonts.

Updated Apr 27, 2026

Search Tags:#png #svg #screenshot #proxy #dom-to-image #dom #web-apis

Ready to run

npx skills add https://github.com/Bearflower/stockfiter --skill snapdom-bearflower

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: snapdom
Source: https://github.com/Bearflower/stockfiter/tree/main/skills/vibe-coding-cn-main/i18n/zh/skills/snapdom
Command: npx skills add https://github.com/Bearflower/stockfiter --skill snapdom-bearflower

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

DOM-to-image capture of HTML elements is error-prone and inconsistent across browsers. SnapDOM provides a fast, dependency-free way to convert DOM elements into scalable SVG or raster images while preserving fonts, styles, and pseudo-elements.

Core Features & Use Cases

High-fidelity exports: SVG, PNG, JPG, and WebP from DOM elements with embedded fonts.
No dependencies: runs on standard Web APIs without external libraries; supports proxy fallbacks for cross-origin resources.
Flexible integration: plugin system, transform straightening, and selective exclusion for complex pages.
Use Case: generate consistent previews for dashboards and social cards from dynamic components.

Quick Start

Run SnapDOM on a target element and export it to SVG or PNG with a single call.

Frequently Asked Questions about snapdom

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

FAQPage Schema

How do I convert HTML elements to SVG or PNG images without external libraries?▼

DOM-to-image conversion turns HTML elements into scalable SVG or raster PNG outputs using standard Web APIs, requiring no external dependencies for reliable styled content rendering.

Why does my DOM-to-image capture fail on cross-origin resources?▼

DOM-to-image capture of cross-origin resources fails due to CORS restrictions, but proxy support routes external resource requests to safely embed cross-origin styles and images.

What is the best way to generate social card previews from dynamic web components?▼

Generating social card previews from dynamic components requires DOM-to-image capture that preserves embedded fonts and styles, outputting consistent SVG or raster images for dashboards.

Can I exclude specific DOM elements from a screenshot capture?▼

DOM-to-image capture supports selective element exclusion, allowing you to remove specific page elements while normalizing transforms to render complex pages accurately.

Does DOM-to-image capture preserve embedded fonts and pseudo-elements?▼

DOM-to-image capture preserves embedded fonts and pseudo-elements by serializing styled DOM content into scalable SVG outputs, ensuring high-fidelity rendering across browsers.