Skip to main content

HTML to Image

Controlled node

Overview​

The HTML to Image node renders HTML content into an image using a headless browser. This is useful for generating screenshots of HTML content, creating visual reports, or capturing web-based content as static images.

By default, the node captures the full page height of the rendered HTML. You can disable this to capture only the viewport area defined by the width and height inputs.

Inputs​

InputTypeDescriptionDefault
RunEventFires when the node starts running-
HTMLTextThe HTML content to render as an image-
WidthNumberThe viewport width in pixels1920
HeightNumberThe viewport height in pixels1080
Full PageBooleanIf true, captures the full page height. If false, captures only the specified viewport heighttrue

Outputs​

OutputTypeDescription
OutputImageThe rendered image as a Jimp image object
DoneEventFires when the node has finished rendering

Runtime Behavior and Defaults​

When triggered by the Run event, the node processes the HTML input through a headless browser rendering service. The rendering respects the specified width and height dimensions.

  • Full Page Mode: When Full Page is set to true (default), the node captures the entire scrollable height of the rendered HTML, not just the viewport.
  • Viewport Mode: When Full Page is set to false, the output is cropped to the exact dimensions specified by Width and Height.
  • Default Dimensions: The default viewport size is 1920×1080 pixels, suitable for standard desktop screenshots.

The output is a Jimp image object that can be processed by other image nodes (such as Resize Image, Crop Image, or Write To Library) or used directly in your workflow.

Example Usage​

Basic HTML to Image Conversion:

  1. Create a Text node containing your HTML content (e.g., <html><body><h1>Hello World</h1></body></html>)
  2. Connect the Text node's output to the HTML input of the HTML to Image node
  3. Connect a Start node or other trigger to the Run input
  4. Connect the Output to a Write To Library node to save the image, or to an AI Vision Write node to analyze the rendered content

Custom Screenshot Dimensions:

  • Set Width to 1200 and Height to 800 for a mobile-sized screenshot
  • Set Full Page to false to capture only the visible viewport area
  • Set Full Page to true to capture the entire scrollable content of the HTML document