Rendering Images

The renderImage function loads an HTML file from the virtual filesystem and captures it through the native provider's supervised Chromium session. The provider drives Chromium directly through the DevTools Protocol.

Browser execution comes from the session's admitted kaya:browser/render@1 tool binding. Embedded hosts must grant that binding and provide Chromium; the deterministic Kaya runtime does not launch a browser itself.

Advanced Capabilities

• Selective DOM Element Cropping: Select a target DOM element with any standard CSS selector (e.g., .hero-header-card) to crop the screenshot bounds to that element exactly.
• Viewport Customization: Specify custom widths and heights.
• Rendering Delays: Set a rendering delay buffer to allow heavy javascript elements, fonts, or charts to completely load before capturing the frame.

Signature

renderImage(
  inputFile: string,              // Required: VFS path to the HTML file to render
  outputFile: string,             // Required: Output filename (e.g., "cover.png")
  width?: number,                 // Viewport width in pixels (default: 1280)
  height?: number,                // Viewport height in pixels (default: 720)
  selector?: string,              // CSS selector to crop screenshot bounds to
  clip?: {x, y, width, height},   // Capture a specific pixel region
  delay?: number,                 // Rendering buffer delay in ms (default: 500)
  quality?: number,               // Compression quality for JPEG output (1-100, .jpg/.jpeg only)
  fullPage?: boolean,             // Capture entire scrollable height (default: false)
  waitForSelector?: string        // Wait for element matching CSS selector to load
) -> file

There is no htmlContent parameter — renderImage always reads from a file. Write your HTML first (e.g. with save() or renderHtml()), then screenshot it.

Example

Save an HTML file before capturing it:

save(
  content: '<html><body><article class="hero-header-card"><h1>Kaya Monthly Digest</h1></article></body></html>',
  filename: "june-newsletter.html"
)

let cardPng = renderImage(
  inputFile: "june-newsletter.html",
  outputFile: "newsletter-cover.png",
  width: 800,
  height: 600,
  selector: ".hero-header-card" // Auto-clips bounds to this CSS element
)

Backward Compatibility: screenshot() is supported as an alias for renderImage().

Host Setup

Configure the renderer and grant the session access before running these examples. See the rendering overview for dependencies and the Tool Server guide for host setup.