HTML/CSS to Image icon

HTML/CSS to Image

Convert HTML/CSS or a URL to an image

Actions2

Overview

This node converts either HTML/CSS content or a website URL into an image. It supports two main operations:

  • HTML to Image: Render custom HTML and CSS code as an image.
  • URL to Image: Capture a screenshot of a specified webpage.

This node is useful for generating visual representations of web content dynamically, such as creating thumbnails, previews, or snapshots of web pages or custom HTML layouts without manual browser interaction.

Practical examples:

  • Automatically generate social media preview images from HTML templates.
  • Capture screenshots of product pages or dashboards for reporting.
  • Convert styled HTML emails into images for embedding in other documents.

Properties

Name Meaning
Operation Choose between "HTML to Image" (convert HTML/CSS) or "URL to Image" (capture webpage).
HTML Content The raw HTML markup to render as an image (only for HTML to Image operation).
CSS Content CSS styles to apply to the HTML content (only for HTML to Image operation).
Viewport Width Width of the viewport in pixels for rendering or capturing the image (both operations).
Viewport Height Height of the viewport in pixels for rendering or capturing the image (both operations).
Response Format Format of the output image response.
- For HTML to Image: options are URL, PNG, Base64.
- For URL to Image: options are URL in PNG, Image (binary), Base64.
URL The website URL to capture as an image (only for URL to Image operation).
Full Page Whether to capture the entire webpage vertically or just the visible viewport (URL to Image).
Wait Till Milliseconds to wait before taking the screenshot, allowing page scripts to load (URL to Image).

Output

The node outputs an array of items where each item contains a json field with the API response data from the image generation service.

  • The json object structure depends on the chosen response format but generally includes:
    • A URL pointing to the generated image if the response format is URL-based.
    • Raw image data or base64 encoded string if those formats are selected.

If the user selects the binary image option (for URL to Image operation), the node returns the image data suitable for further binary processing in n8n workflows.

Dependencies

  • Requires an API key credential for the external service at https://htmlcsstoimg.com/api/v1/generateImage.
  • The node uses this API to perform the actual conversion or screenshot capture.
  • Proper configuration of this API key credential in n8n is necessary for the node to function.

Troubleshooting

  • Common issues:

    • Invalid or missing API key credential will cause authentication failures.
    • Incorrect URLs or unreachable websites may result in errors or empty images.
    • Insufficient wait time (Wait Till) might capture incomplete page renders.
    • Large viewport sizes may increase processing time or cause memory issues.

  • Error messages:

    • Errors returned from the external API will be surfaced, often indicating network issues or invalid parameters.
    • If the node is set to continue on fail, errors will appear in the output JSON under an error property.
    • To resolve, verify API credentials, check URL validity, and adjust wait times or viewport dimensions.

Links and References

Discussion