HTML to Image

Action ID: html_to_image

Description

Convert HTML content to an image.

Input Parameters

Name	Type	Required	Default	Description
html_content	string	✓	-	The HTML content to convert to an image
width	integer	-	800	Width of the output image in pixels (100-4000)
height	integer	-	null	Height of the output image in pixels (100-4000). Auto-calculated if not specified
shared_messages	array	-	null	Shared messages from the action

View JSON Schema

{
  "description": "HtmlToImage action runner input.",
  "properties": {
    "html_content": {
      "description": "The HTML content to convert to an image",
      "title": "HTML Content",
      "type": "string"
    },
    "width": {
      "default": 800,
      "description": "Width of the output image in pixels",
      "maximum": 4000,
      "minimum": 100,
      "title": "Width",
      "type": "integer"
    },
    "height": {
      "anyOf": [
        {
          "maximum": 4000,
          "minimum": 100,
          "type": "integer"
        },
        {
          "type": "null"
        }
      ],
      "default": null,
      "description": "Height of the output image in pixels (optional - will be calculated from content if not specified)",
      "title": "Height"
    },
    "shared_messages": {
      "anyOf": [
        {
          "items": {
            "type": "string"
          },
          "type": "array"
        },
        {
          "type": "null"
        }
      ],
      "default": null,
      "description": "Shared messages from the action",
      "title": "Shared Messages"
    }
  },
  "required": [
    "html_content"
  ],
  "title": "HtmlToImageActionRunnerInput",
  "type": "object"
}

Output Parameters

Name	Type	Description
image_url	string	URL of the generated image
width	integer	Width of the generated image in pixels
height	integer	Height of the generated image in pixels
shared_messages	array	Shared messages from the action

View JSON Schema

{
  "description": "HtmlToImage action runner output.",
  "properties": {
    "image_url": {
      "description": "URL of the generated image",
      "title": "Image URL",
      "type": "string"
    },
    "width": {
      "description": "Width of the generated image in pixels",
      "title": "Width",
      "type": "integer"
    },
    "height": {
      "description": "Height of the generated image in pixels",
      "title": "Height",
      "type": "integer"
    },
    "shared_messages": {
      "anyOf": [
        {
          "items": {
            "type": "string"
          },
          "type": "array"
        },
        {
          "type": "null"
        }
      ],
      "default": null,
      "description": "Shared messages from the action",
      "title": "Shared Messages"
    }
  },
  "required": [
    "image_url",
    "width",
    "height"
  ],
  "title": "HtmlToImageActionRunnerOutput",
  "type": "object"
}

How It Works

This node converts HTML content into a static image by rendering the HTML in a headless browser environment. The HTML content is parsed and rendered with full CSS support, including layouts, fonts, colors, and styles. The rendering engine captures the visual output and exports it as an image file. You can specify the width explicitly, and the height can either be set manually or automatically calculated based on the content's natural dimensions.

Usage Examples

Example 1: Simple Text Banner

Input:

html_content: "<div style='background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px; text-align: center; font-family: Arial; color: white; font-size: 32px; font-weight: bold;'>Welcome to AgenticFlow</div>"
width: 800

Output:

image_url: "https://storage.example.com/images/banner-12345.png"
width: 800
height: 120

Example 2: Product Card with Auto Height

Input:

html_content: "<div style='border: 2px solid #e0e0e0; border-radius: 12px; padding: 20px; font-family: system-ui;'><h2 style='margin: 0 0 10px 0; color: #333;'>Premium Plan</h2><p style='color: #666; margin: 0 0 15px 0;'>All features included</p><div style='font-size: 36px; font-weight: bold; color: #667eea;'>$99/mo</div></div>"
width: 400

Output:

image_url: "https://storage.example.com/images/product-67890.png"
width: 400
height: 180

Example 3: Social Media Quote Card

Input:

html_content: "<!DOCTYPE html><html><head><style>body{margin:0;padding:40px;background:#1a1a2e;font-family:Georgia,serif}.quote{color:#eee;font-size:28px;font-style:italic;margin-bottom:20px}.author{color:#16c784;font-size:18px;text-align:right}</style></head><body><div class='quote'>\"The best time to plant a tree was 20 years ago. The second best time is now.\"</div><div class='author'>— Chinese Proverb</div></body></html>"
width: 1200
height: 630

Output:

image_url: "https://storage.example.com/images/quote-54321.png"
width: 1200
height: 630

Common Use Cases

• Social Media Graphics: Generate Open Graph images, Twitter cards, and social media post visuals from HTML templates

• Email Marketing: Create dynamic email header images and promotional banners based on campaign data

• Certificate Generation: Produce completion certificates, badges, or achievement cards with personalized information

• Report Visualization: Convert HTML-based charts, tables, and dashboards into shareable image formats

• Dynamic Thumbnails: Generate preview images for blog posts, articles, or products with customized layouts

• Watermarked Content: Create branded images with logos, text overlays, and custom styling

• Automated Graphics: Produce recurring visual content like daily quotes, stats updates, or announcements

Error Handling

Error Type	Cause	Solution
Invalid HTML Syntax	Malformed HTML with unclosed tags or syntax errors	Validate HTML syntax and ensure all tags are properly closed
Rendering Timeout	Complex HTML or large images taking too long to render	Simplify the HTML structure or reduce embedded image sizes
Width/Height Out of Range	Dimensions outside the 100-4000 pixel range	Ensure width and height values are between 100 and 4000 pixels
Missing Fonts	Referenced fonts not available in rendering environment	Use web-safe fonts or include font files via CDN links
CSS Not Rendering	External CSS stylesheets not loading	Use inline styles or embedded <style> tags instead of external CSS
Image Too Large	Generated image exceeds size limits	Reduce dimensions or simplify content to decrease file size
Empty Content	HTML content is empty or produces no visual output	Verify HTML content has visible elements with dimensions

Notes

• Full HTML Support: Supports complete HTML documents with <!DOCTYPE>, <head>, and <body> tags, as well as simple HTML fragments

• CSS Capabilities: Inline styles, embedded <style> tags, and modern CSS features like flexbox, grid, and gradients are fully supported

• Auto Height: When height is not specified, it automatically calculates based on content, useful for variable-length content

• Font Loading: Web-safe fonts work reliably. For custom fonts, use CDN links like Google Fonts in your HTML

• Image Optimization: The output is PNG format by default, optimized for quality and web delivery

• Responsive Design: Use viewport units (vw, vh) and percentages to create designs that scale with the specified width

• Performance: Simple HTML renders in seconds. Complex layouts with many elements may take longer

• Use Cases: Ideal for automated graphic generation, dynamic content visualization, and programmatic image creation