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 into an image.
  • URL to Image: Capture a screenshot of a specified webpage.

This is useful for generating visual representations of web content dynamically, such as creating thumbnails, previews, or snapshots of websites 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
Viewport Width Width of the viewport in pixels used when rendering the image or capturing the screenshot.
Viewport Height Height of the viewport in pixels used when rendering the image or capturing the screenshot.
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 (boolean).
Wait Till Time in milliseconds to wait before taking the screenshot, allowing page elements to load.
Response Format Format of the output image. Options for URL to Image: "URL in PNG", "Image" (binary), or "Base64".

Output

The node outputs a JSON object containing the response from the image generation API. Depending on the selected response format, this can be:

  • A direct URL to the generated PNG image.
  • The image data itself (likely as binary or base64 encoded).
  • Base64 string representation of the image.

If the user selects the "Image" option, the node returns the image data suitable for further binary processing in n8n.

Dependencies

  • Requires an API key credential for the external service at https://htmlcsstoimg.com/api/v1/generateImage.
  • The node uses this external API to perform the actual HTML rendering or webpage screenshot capture.
  • No additional environment variables are needed beyond the configured API authentication.

Troubleshooting

  • Common issues:

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

  • Error messages:

    • Errors returned from the external API will be surfaced with their message.
    • Network or timeout errors may occur if the service is unreachable.

  • Resolutions:

    • Verify API credentials and permissions.
    • Ensure URLs are correct and publicly accessible.
    • Increase the wait time if dynamic content loads slowly.
    • Adjust viewport dimensions to reasonable values.

Links and References

Discussion