HTML/CSS to Image icon

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. It is useful when you want to generate visual representations of web content dynamically without needing a browser or manual screenshot. Common scenarios include creating social media preview images, generating styled reports, or rendering email templates as images.

Specifically for the "HTML to Image" operation, the node takes raw HTML and optional CSS styling, renders it in a virtual viewport, and outputs an image in various formats.

Properties

Name Meaning
HTML Content The raw HTML markup that will be rendered into an image.
CSS Content Optional CSS styles to apply to the HTML content before rendering.
Viewport Width The width (in pixels) of the virtual viewport used to render the HTML content.
Viewport Height The height (in pixels) of the virtual viewport used to render the HTML content.
Response Format The format of the output image. Options: URL (a link to the generated image), PNG (raw PNG image data), or Base64 (base64-encoded image).

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 URL pointing to the generated image.
  • Raw PNG image data.
  • Base64-encoded image string.

If the image is returned as binary data (e.g., PNG), it will be included accordingly in the output.

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/CSS rendering and image generation.
  • 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 might result in unexpected image output or errors.
    • Large or complex HTML content may lead to timeouts or slow responses.
  • Error messages:
    • Errors from the external API are propagated; check the error message for details.
    • Network or connectivity issues will cause HTTP request failures.
  • Resolutions:
    • Verify API key validity and permissions.
    • Validate and simplify HTML/CSS input if errors occur.
    • Increase timeout settings or reduce viewport size for large content.

Links and References

Discussion