snapdom

Convert HTML DOM elements into SVG or raster images with preserved styles.

48|4|Updated Dec 15, 2025
One-click install
npx skills add https://github.com/godmakereth/vibe-coding-tw --skill snapdom-godmakereth
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: snapdom
Source: https://github.com/godmakereth/vibe-coding-tw/tree/main/skills/snapdom
Command: npx skills add https://github.com/godmakereth/vibe-coding-tw --skill snapdom-godmakereth

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Converting complex HTML DOM structures into portable images (SVG or raster) with preserved styles, fonts, and pseudo-elements, to simplify sharing, previews, and documentation.

Core Features & Use Cases

  • Convert DOM elements to SVGs or raster images (PNG/JPG/WebP) with embedded fonts and icons.
  • Preserve CSS styles, pseudo-elements, shadows, and transforms for accurate renderings.
  • Enable both in-browser captures and custom rendering pipelines with proxy support for cross-origin assets.

Quick Start

Capture a target DOM element and export it as SVG or raster image with preserved styles and fonts.

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 structures into scalable SVG images?

To convert HTML DOM structures into scalable SVG images, you can capture styled elements, pseudo-elements, and fonts directly in the browser. This process preserves CSS styles and transforms for accurate, portable renderings.

Can I capture cross-origin assets when converting DOM elements to images?

Yes, you can capture cross-origin assets when converting DOM elements to images by utilizing proxy support. This ensures external resources like fonts and icons are properly embedded in the final SVG or raster output.

What is the best way to preserve CSS styles and fonts during DOM image capture?

The best way to preserve CSS styles and fonts during DOM image capture is using a tool that embeds them directly into the output. This ensures shadows, transforms, and pseudo-elements render accurately in the exported image.

Do I need external dependencies to export DOM elements as PNG or WebP files?

No, you do not need external dependencies to export DOM elements as PNG or WebP files. The conversion process operates independently, supporting multiple raster outputs like PNG, JPG, and WebP without requiring additional libraries.

How to export styled HTML elements to raster images like PNG or JPG?

To export styled HTML elements to raster images like PNG or JPG, you capture the target DOM node and select a raster output format. The process embeds fonts and preserves CSS styles for accurate visual representation.

Why does my HTML to SVG conversion lose pseudo-elements and shadows?

HTML to SVG conversion loses pseudo-elements and shadows when using basic screenshot tools. Advanced DOM capture techniques explicitly preserve CSS styles, shadows, and pseudo-elements to ensure an accurate rendering.