A developer utility for programmatically converting HTML elements and DOM nodes into downloadable images or binary data.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install dom-to-image
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install dom-to-image using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is DOM to Image?
The DOM to Image skill is a technical bridge that allows developers to transform standard web elements into static image files. By leveraging the power of SVG foreignObject, this skill captures the visual state of any HTML node—including its CSS styles—and outputs it as a PNG, JPEG, SVG, or Blob.
Integrating this into your Openclaw Skills workflow enables advanced automation for web applications, such as generating dynamic certificates, capturing dashboard snapshots, or creating custom social media assets directly from your frontend code. It supports high-resolution scaling and precise element filtering to ensure the resulting images meet professional standards.
DOM to Image Use Cases
- Programmatically generating shareable social media cover images from HTML templates.
- Creating automated screenshot tools for specific UI components or data visualizations.
- Enabling users to export complex HTML reports or charts as high-quality PNG or JPEG files.
- Building dynamic image generation pipelines within Openclaw Skills for automated content creation.
How DOM to Image Works
- Identify the target HTML element using a CSS selector or a React ref.
- Choose the desired output format such as PNG for transparency, JPEG for photos, or SVG for vectors.
- Apply custom rendering options like backgroundColor, quality settings, or pixelRatio for high DPI support.
- Invoke the conversion function which asynchronously processes the DOM tree and styles.
- Handle the resulting DataURL or Blob to trigger a file download or upload the asset to a server via Openclaw Skills.
DOM to Image Setup
To start using this skill, install the core library via npm in your project directory:
npm install html-to-image
Ensure your project environment supports modern browser APIs, as this skill relies on the canvas and SVG foreignObject capabilities.
DOM to Image Data Schema & Taxonomy
The skill processes DOM nodes and returns data in the following formats:
| Format | Output Type | Best Use Case |
|---|---|---|
| PNG | Data URL / Blob | Default web use, maintains transparency |
| JPEG | Data URL / Blob | Photographic content, supports quality compression |
| SVG | Data URL | Scalable vector graphics for high-resolution displays |
| Blob | Binary | Direct file uploads and efficient memory handling |
Configuration metadata for Openclaw Skills can include:
- pixelRatio: Adjusts the resolution of the output image.
- filter: A predicate function to selectively include or exclude DOM nodes.
DOM to Image Advanced Features
- Smart element filtering to remove interactive UI components like buttons or secret divs from the final export.
- Retina display optimization using custom pixelRatio settings for crisp, high-resolution rendering.
- Cache-busting functionality to ensure that images and styles are reloaded from the network rather than the browser cache.
- Seamless integration with React using hooks like useCallback and useRef for efficient lifecycle management in Openclaw Skills.
SKILL.md
Loading
Related Openclaw Skills
AI Editor RSP Editing
A cloud-powered video editing agent that automates highlight cutting, audio syncing, and 1080p rendering for RSP content.
Bunge Global Agriculture Intelligence
A specialized intelligence skill for analyzing Bunge's global agricultural supply chain and its role as a leading ABCD grain trader.
Error Monitoring Agent
A comprehensive error monitoring and alerting system designed to detect, track, and automatically resolve exceptions for AI agents in real-time.
Drunk Mode Skill
A sophisticated persona-shifting skill that applies a logical yet slightly tipsy conversational style to AI agents.
Archer Daniels Midland (ADM) Intelligence Skill
A comprehensive intelligence module for analyzing Archer Daniels Midland's global agricultural operations and market dominance.
Anglo American Mining Intelligence
A comprehensive intelligence skill for analyzing Anglo American's global mining operations, diamond supply chains, and commodity market influence.
Featured*
