# Snapdom

SnapDOM is a fast, accurate DOM-to-image capture tool that converts HTML elements into...

- Repository: https://github.com/2025Emma/vibe-coding-cn (23122 stars)
- Category: Media
- License: MIT
- Last updated: 2025-12-17
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add 2025Emma/vibe-coding-cn --skill snapdom -g -a claude-code -y`
Codex: `npx skills add 2025Emma/vibe-coding-cn --skill snapdom -g -a codex -y`
Cursor: `npx skills add 2025Emma/vibe-coding-cn --skill snapdom -g -a cursor -y`
Gemini CLI: `npx skills add 2025Emma/vibe-coding-cn --skill snapdom -g -a gemini-cli -y`

## Description

snapDOM is a fast, accurate DOM-to-image capture tool that converts HTML elements into scalable SVG images. Use for capturing HTML elements, converting DOM to images (SVG, PNG, JPG, WebP), preserving styles, fonts, and pseudo-elements.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# SnapDOM Skill

Fast, dependency-free DOM-to-image capture library for converting HTML elements into scalable SVG or raster image formats.

## When to Use This Skill

Use SnapDOM when you need to:
- Convert HTML elements to images (SVG, PNG, JPG, WebP)
- Capture styled DOM with pseudo-elements and shadows
- Export elements with embedded fonts and icons
- Create screenshots with custom dimensions or scaling
- Handle CORS-blocked resources using proxy fallback
- Implement custom rendering pipelines with plugins
- Optimize performance on large or complex elements

## Key Features

### Universal Export Options
- **SVG** - Scalable vector format, embeds all styles
- **PNG, JPG, WebP** - Raster formats with configurable quality
- **Canvas** - Get raw Canvas element for further processing
- **Blob** - Raw binary data for custom handling

### Performance
- Ultra-fast capture (1.6ms for small elements, ~171ms for 4000×2000)
- **No dependencies** - Uses standard Web APIs only
- Outperforms html2canvas by 10-40x on complex elements

### Style Support
- Embedded fonts (including icon fonts)
- CSS pseudo-elements (::before, ::after)
- CSS counters
- CSS line-clamp
- Transform and shadow effects
- Shadow DOM content

### Advanced Capabilities
- Same-origin iframe support
- CORS proxy fallback for blocked assets
- Plugin system for custom transformations
- Straighten transforms (remove rotate/translate)
- Selective element exclusion
- Tight bounding box calculation

## Installation

### NPM/Yarn
```bash
npm install @zumer/snapdom
# or
yarn add @zumer/snapdom
```

### CDN (ES Module)
```html
<script type="module">
  import { snapdom } from "https://unpkg.com/@zumer/snapdom/dist/snapdom.mjs";
</script>
```

### CDN (UMD)
```html
<script src="https://unpkg.com/@zumer/snapdom/dist/snapdom.umd.js"></script>
```

## Quick Start Examples

### Basic Reusable Capture
```javascript
// Create reusable capture object
const result = await snapdom(document.querySelector('#target'));

The rest: https://github.com/2025Emma/vibe-coding-cn/blob/HEAD/i18n/zh/skills/snapdom/SKILL.md