# 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                                                   |

<details>

<summary>View JSON Schema</summary>

```json
{
  "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"
}
```

</details>

## 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         |

<details>

<summary>View JSON Schema</summary>

```json
{
  "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"
}
```

</details>

## 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.agenticflow.ai/reference/nodes/html_to_image.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.