POST
/
v1
/
web
/
html_to_any
import { JigsawStack } from "jigsawstack";
import fs from "fs";

const jigsawstack = JigsawStack({
  apiKey: "your-api-key",
});

// Screenshot from HTML content
const htmlResult = await jigsawstack.web.html_to_any({
  html: "<div style='width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-family: Arial; font-size: 48px;'>Hello World!</div>",
  quality: 100,
  type: "png",
});

// Save the result to a file
const htmlBuffer = await htmlResult.arrayBuffer();
fs.writeFileSync("html_screenshot.png", Buffer.from(htmlBuffer));

// Screenshot from URL
const urlResult = await jigsawstack.web.html_to_any({
  url: "https://example.com",
  full_page: true,
  type: "jpeg",
  quality: 90,
});

const urlBuffer = await urlResult.arrayBuffer();
fs.writeFileSync("website_screenshot.jpg", Buffer.from(urlBuffer));

// Generate PDF from website
const pdfResult = await jigsawstack.web.html_to_any({
  url: "https://example.com/article",
  type: "pdf",
  pdf_print_background: true,
});

const pdfBuffer = await pdfResult.arrayBuffer();
fs.writeFileSync("website.pdf", Buffer.from(pdfBuffer));

// Mobile device emulation with dark mode
const mobileResult = await jigsawstack.web.html_to_any({
  url: "https://example.com",
  is_mobile: true,
  dark_mode: true,
  size_preset: "HD",
  type: "webp",
  quality: 85,
});

const mobileBuffer = await mobileResult.arrayBuffer();
fs.writeFileSync("mobile_dark.webp", Buffer.from(mobileBuffer));

​
Request Parameters

​
Body

​
html
string

The HTML content to convert to image or PDF. Either html or url is required, but not both.

​
url
string

The URL of the webpage to capture. Either html or url is required, but not both.

​
type
string
default:"png"

The output file format. Supported formats:

  • png - PNG image format
  • jpeg - JPEG image format
  • webp - WebP image format
  • pdf - PDF document
​
quality
number
default:"75"

The quality of the output image (1-100). Higher values produce better quality but larger file sizes. Only applies to jpeg and webp formats.

​
full_page
boolean
default:"false"

When set to true, captures the entire scrollable area of the page instead of just the viewport.

​
omit_background
boolean
default:"false"

When set to true, makes the background transparent for PNG format images.

​
width
number
default:"1920"

The width of the viewport in pixels.

​
height
number
default:"1080"

The height of the viewport in pixels.

​
scale
number
default:"1"

Device scale factor (minimum: 1). Controls the resolution of the screenshot.

​
size_preset
string

Predefined screen size preset to use instead of specifying width and height manually. Supported values include:

  • QVGA - 320×240
  • VGA - 640×480
  • SVGA - 800×600
  • HD - 1280×720
  • HD+ - 1600×900
  • SXGA - 1280×1024
  • FHD - 1920×1080
  • 2K - 2048×1080
  • 2K QHD - 2560×1440
  • 5K - 5120×2880
  • 4K UHD - 3840×2160

See the full list of screen size presets here

​
is_mobile
boolean
default:"false"

When set to true, emulates a mobile device viewport and takes the meta viewport tag into account.

​
dark_mode
boolean
default:"false"

When set to true, forces the page to render in dark mode using the CSS prefers-color-scheme media feature.

​
use_graphic_renderer
boolean
default:"false"

Enables WebGL, GPU acceleration, and other 3D APIs. Note: This option may impact performance and increase API latency.

​
goto_options
object

Custom page-load behavior settings.

​
pdf_display_header_footer
boolean
default:"false"

When set to true, displays header and footer in PDF output. Only applies when type is set to pdf.

​
pdf_print_background
boolean
default:"false"

When set to true, prints background graphics in PDF output. Only applies when type is set to pdf.

​
pdf_page_range
string

Page ranges to print in PDF format (e.g., ‘1-5, 8, 11-13’). Only applies when type is set to pdf.

​
x-api-key
string
required

Your JigsawStack API key

​
Response

The API returns the generated file (image or PDF) directly in the response body as binary data.

import { JigsawStack } from "jigsawstack";
import fs from "fs";

const jigsawstack = JigsawStack({
  apiKey: "your-api-key",
});

// Screenshot from HTML content
const htmlResult = await jigsawstack.web.html_to_any({
  html: "<div style='width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-family: Arial; font-size: 48px;'>Hello World!</div>",
  quality: 100,
  type: "png",
});

// Save the result to a file
const htmlBuffer = await htmlResult.arrayBuffer();
fs.writeFileSync("html_screenshot.png", Buffer.from(htmlBuffer));

// Screenshot from URL
const urlResult = await jigsawstack.web.html_to_any({
  url: "https://example.com",
  full_page: true,
  type: "jpeg",
  quality: 90,
});

const urlBuffer = await urlResult.arrayBuffer();
fs.writeFileSync("website_screenshot.jpg", Buffer.from(urlBuffer));

// Generate PDF from website
const pdfResult = await jigsawstack.web.html_to_any({
  url: "https://example.com/article",
  type: "pdf",
  pdf_print_background: true,
});

const pdfBuffer = await pdfResult.arrayBuffer();
fs.writeFileSync("website.pdf", Buffer.from(pdfBuffer));

// Mobile device emulation with dark mode
const mobileResult = await jigsawstack.web.html_to_any({
  url: "https://example.com",
  is_mobile: true,
  dark_mode: true,
  size_preset: "HD",
  type: "webp",
  quality: 85,
});

const mobileBuffer = await mobileResult.arrayBuffer();
fs.writeFileSync("mobile_dark.webp", Buffer.from(mobileBuffer));

​
Common Use Cases

​
Website Screenshots

Capture screenshots of websites for:

  • Monitoring and testing
  • Generating previews or thumbnails
  • Creating social media images
  • Archiving webpage states

​
HTML to Image Conversion

Convert HTML snippets to images for:

  • Email templates
  • Social media posts
  • Dynamic image generation
  • Creating graphics from templates

​
PDF Generation

Create PDFs from webpages for:

  • Generating reports
  • Creating downloadable content
  • Archiving articles or documentation
  • Creating printable versions of web content

​
Responsive Design Testing

Test how websites appear on different screen sizes:

  • Mobile vs. desktop views
  • Various device dimensions
  • Light vs. dark mode

​
Best Practices

  1. Optimal Quality Settings:

    • For lossless quality, use PNG format with quality: 100
    • For smaller file sizes with good quality, use WebP format with quality: 80-90
    • For the smallest file sizes (where quality is less critical), use JPEG format with quality: 70-80

  2. Page Loading:

    • Use wait_until: "networkidle0" for dynamic websites that load content via JavaScript
    • Set appropriate timeout values for websites that take longer to load
    • Consider using explicit width and height to match the content dimensions

  3. PDF Configuration:

    • Enable pdf_print_background when capturing colorful websites as PDFs
    • Use pdf_page_range to capture only specific pages for large websites
    • Set appropriate page dimensions with width and height for better PDF layout

Was this page helpful?

Suggest editsRaise issue