A high-performance skill for converting HTML and CSS layouts into professional-grade images using Chrome headless technology.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install lh-html-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 lh-html-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 HTML to Image?
The HTML to Image skill is a powerful utility within the ecosystem of Openclaw Skills that allows developers to render HTML and CSS as high-quality images. Unlike generative AI tools that might struggle with text rendering, this skill uses the Chrome headless engine to ensure that typography and layouts are pixel-perfect and exactly as defined in the source code. It is an ideal solution for developers who need to automate the creation of visual assets without incurring API costs.
By leveraging standard web technologies, this skill provides 100% accurate text rendering and total control over the final output. It is specifically designed for text-heavy visual content where precision is paramount, making it a staple for creators who use Openclaw Skills to streamline their content production pipelines.
HTML to Image Use Cases
- Automated generation of cover images featuring titles, subtitles, and tags.
- Creation of info cards for data display and complex comparison charts.
- Production of text layout images such as quote cards and highlight graphics.
- Batch processing of social media banners and marketing assets.
How HTML to Image Works
- The user creates an HTML file containing the desired content and inline CSS for styling.
- The skill identifies the target dimensions (e.g., 1080x1440 for portrait) and font requirements.
- A headless instance of Google Chrome is triggered to render the HTML file in the background.
- The skill captures a high-resolution screenshot of the rendered page, optionally applying a device scale factor for high-DPI output.
- The final image is saved locally as a PNG file, ready for distribution or further use.
HTML to Image Setup
To use this within the Openclaw Skills framework, ensure Google Chrome is installed on your system. You can configure the path to the executable if necessary.
# For macOS users
export CHROME_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
# For Linux users (installing Noto CJK fonts for better rendering)
sudo apt install fonts-noto-cjk
The skill will automatically detect the browser path or use the CHROME_PATH environment variable to execute the screenshot commands.
HTML to Image Data Schema & Taxonomy
The skill utilizes standard HTML inputs and produces high-fidelity image outputs. The following table describes the typical configuration for generating images:
| Parameter | Description | Recommended Value |
|---|---|---|
| Window Size | Defines the pixel dimensions of the output image. | 1080x1440 (3:4) |
| Scale Factor | Controls the pixel density (Retina/High-DPI). | 2 for high quality |
| Font Family | Specifies the typography for rendering. | -apple-system, Noto Sans SC |
| Output Format | The file type of the generated asset. | PNG |
HTML to Image Advanced Features
- Support for high-DPI (Retina) output using the force-device-scale-factor flag.
- Headless mode execution to minimize resource usage and allow for server-side automation.
- Custom environment variable support via CHROME_PATH for flexible deployment across different OS environments.
- Zero-cost image generation with no external API dependencies or subscription fees.
- Full support for CJK fonts and complex CSS layouts including Flexbox and Grid.
SKILL.md
Loading
Related Openclaw Skills
Edge-TTS Skill
A powerful text-to-speech skill leveraging Microsoft Edge's neural voices to convert text into high-quality audio with customizable speed and pitch.
lh-deepwiki
A specialized MCP skill for querying GitHub repository documentation and performing AI-powered Q&A via Streamable HTTP.
VibeTrading Global Signals
An advanced toolset for querying autonomous AI-generated trading signals and market sentiment analysis for major cryptocurrencies.
VibeTrading Code Generator
An AI-powered skill that transforms natural language prompts into production-ready Python trading strategies for the Hyperliquid exchange.
lh-video-gen
A command-line tool that transforms Markdown scripts into professional 9:16 vertical videos with synchronized audio and subtitles.
tldr (Too Long; Didn't Read)
A skill that provides concise, community-driven man pages for CLI tools to speed up developer workflows and minimize token usage.
tldr
A lightweight documentation tool providing concise, example-driven alternatives to traditional man pages.
Featured*
