HTML/CSS to Image

Convert HTML/CSS or a URL to an image

Actions2

Overview

This node converts HTML and CSS content into an image or captures a screenshot of a website URL. It is useful for generating visual representations of web content dynamically, such as creating thumbnails, previews, or snapshots of styled HTML without needing a browser manually. Practical examples include:

  • Rendering custom HTML email templates as images.
  • Generating social media preview images from HTML content.
  • Capturing screenshots of webpages for monitoring or archiving purposes.

Properties

Name Meaning
HTML Content The raw HTML markup to render as an image (used in "HTML to Image" operation).
CSS Content The CSS styles to apply to the HTML content before rendering (used in "HTML to Image").
Viewport Width The width in pixels of the viewport used to render the image or capture the screenshot.
Viewport Height The height in pixels of the viewport used to render the image or capture the screenshot.
Response Format The format of the returned image when converting HTML to image. Options: URL, PNG, Base64.

Output

The output JSON contains the response from the external image generation API. Depending on the selected response format, it may include:

  • A URL pointing to the generated image.
  • The image data encoded as PNG.
  • The image data encoded as a Base64 string.

If the node is configured to capture a webpage screenshot (not requested here), similar formats are available.

Binary data output is not explicitly handled by this node; all image data is returned within the JSON response.

Dependencies

  • Requires an API key credential for the external service at https://htmlcsstoimg.com/api/v1/generateImage.
  • The node makes authenticated HTTP POST requests to this API endpoint.
  • Proper configuration of the API authentication credential in n8n is necessary.

Troubleshooting

  • Common issues:
    • Invalid or missing API credentials will cause authentication failures.
    • Malformed HTML or CSS input might result in unexpected image output or errors.
    • Network connectivity problems can prevent successful API calls.
  • Error messages:
    • Errors from the API are caught and returned as error messages in the output JSON if "Continue On Fail" is enabled.
    • Otherwise, the node throws an operation error indicating the failure and item index.
  • Resolutions:
    • Verify that the API key credential is correctly set up and valid.
    • Validate HTML and CSS inputs before running the node.
    • Ensure network access to the external API endpoint.

Links and References

Discussion