snapdom

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

2|Updated Jan 7, 2026

Search Tags:#plugin #svg #proxy #web-fonts #pseudo-elements #dom-capture #image-export

Ready to run

npx skills add https://github.com/ShunmeiCho/dotclaude --skill snapdom-shunmeicho

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: snapdom
Source: https://github.com/ShunmeiCho/dotclaude/tree/main/skills/snapdom
Command: npx skills add https://github.com/ShunmeiCho/dotclaude --skill snapdom-shunmeicho

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

SnapDOM provides a fast, dependency-free method to convert DOM elements into scalable images, preserving fonts, icons, and CSS styles.

Core Features & Use Cases

High-fidelity export: SVG for vectors; PNG/JPG/WebP for raster outputs.
Zero-dependency client-side rendering that runs in modern browsers.
Use Case: generate previews of UI components for docs, design systems, and automated testing.

Quick Start

Use SnapDOM to capture a target element and export it as SVG or PNG, with optional scale and font embedding.

Frequently Asked Questions about snapdom

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

FAQPage Schema

How do I capture a DOM element and export it as an SVG image?▼

Yes, you can capture DOM elements with pseudo-elements and web-fonts embedded by using a client-side rendering approach that supports optional CSS and shadow rendering. This ensures high-fidelity image exports with fonts and icons preserved accurately.

What is the best way to convert HTML elements to PNG without external dependencies?▼

You can generate UI component previews for design systems by capturing DOM elements and exporting them as scalable images. This method supports automated testing workflows and documentation by preserving CSS styles, web-fonts, and visual fidelity.

Does DOM to image conversion work with proxy support for external resources?▼

Yes, DOM to image conversion can work with proxy support to handle external resources properly. This ensures that web-fonts and external assets are correctly embedded during the HTML element capture process for accurate SVG or raster outputs.

Why do my exported DOM images lose CSS styling and fonts?▼

After exporting DOM elements to images, you can process these SVG or raster outputs for automated testing pipelines, embed them into component documentation, or integrate them into design system galleries for visual regression testing.