Skip to main content
Glama

Draw HTML as an image

html_to_image

Draw a page of HTML and CSS as a PNG, JPEG or WebP picture: social cards, badges, receipts, mockups, diagrams in SVG. The page is drawn by Chromium with no script and no network access, so inline CSS, SVG and data: pictures and fonts work and anything fetched from an address does not. width and height are the page's size in CSS pixels; scale 2 makes a sharper picture; full_page draws a long page to its end. Returns a download URL valid for one hour.

Input Schema

NameRequiredDescriptionDefault
htmlYesThe page: a full HTML document or a fragment, with its CSS in a style element. At most 2 MB.
scaleNoPixels per CSS pixel. Default 1.
widthNoPage width in CSS pixels. Default 1280.
formatNoDefault png.
heightNoPicture height in CSS pixels (the smallest height with full_page). Default 720.
qualityNoFor jpeg and webp. Default 85.
full_pageNoDraw the whole page, up to 16,000 pixels tall.
transparentNoLeave areas the page does not paint see-through (PNG and WebP).

Schema Changelog

Changes observed during successful MCP inspections.

  1. First observed

TDQS

A4.5/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the full burden and does solid work: it discloses the Chromium renderer, a script-disabled sandbox, blocked network fetches, and a one-hour download URL as the return. It does not cover failure behavior for invalid HTML, size-limit errors beyond the schema's 2 MB note, or any rate limits.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Front-loaded with purpose and use cases, then constraints, then the parameters that matter, then the return value. Every sentence carries distinct information with no restatement of the name or title.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Despite eight parameters and no annotations or output schema, the description covers the render environment, the key sizing knobs, and the return contract (a one-hour download URL). An agent has everything needed to call it correctly and anticipate the sandbox limits.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, so the baseline is 3; the description adds practical interpretation by clarifying that width/height are CSS pixel page dimensions, that 'scale 2 makes a sharper picture', and that full_page extends a long page to its end. It does not touch format, quality, or transparent, but the schema already documents those fully.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb and resource ('Draw a page of HTML and CSS as a PNG, JPEG or WebP picture') and enumerates concrete artifacts (social cards, badges, receipts, mockups, SVG diagrams). The clause 'anything fetched from an address does not' work implicitly separates it from the sibling screenshot_url, so an agent can pick correctly without opening a schema.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Usage context is clear through the example use cases and the rendering constraints (no script, no network access) that tell the agent when this tool will and will not succeed. It stops short of naming screenshot_url as the alternative for live URLs, leaving that routing step to inference.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Try in Browser

Glama MCP Gateway

Add one secure layer between your agents and this server.

Resources