URL to PNG with TypeScript

Screenshot webpages as PNG with TypeScript

No browser management required

Capture public webpages from TypeScript with the @html-css-to-image/client npm package without installing Chrome, running Puppeteer or Playwright, or maintaining screenshot storage and delivery.

Start free Read the API docs
  • No browser processes to maintain
  • Full-page and selector controls included
  • Complete TypeScript request below
Real URL screenshot API requests followed by their rendered webpage images.
Request
POST https://hcti.io/v1/image
{
"url": "https://google.com",
"format": "png",
"viewport_height": 480,
"viewport_width": 640
}
https://hcti.io/v1/image/019fb43a-a8b4-7017-a337-6bac3e7305a0.png
https://google.com
Screenshot of Google in a small viewport

TypeScript workflow

Test the webpage capture before adding it to TypeScript

Choose the URL and browser state here, then use the TypeScript example below instead of rebuilding the screenshot workflow locally.

Options

Enter a public webpage URL.

Apply styles after the page loads and before the screenshot is captured.

Content

Adjust how content is rendered by adjusting these settings.
?

A CSS selector for an element in the HTML. We’ll crop the image to this specific element.

?

Removes the background from the rendered image.

Image size & Viewport

By default images are cropped to the outermost HTML element or the chosen selector. Adjust viewport and sizing settings below.
?

Take a screenshot of the entire screen

?

Adjusts the screenshot pixel ratio. HTML and template renders default to 2; URL renders default to 1.

?

Set the height and width of Chrome's viewport. Setting a viewport disables automatic cropping.

Sets the emulated viewport orientation to landscape.

Makes the emulated viewport behave like a mobile device and honor mobile viewport behavior.

Makes the emulated viewport report support for touch events.

Timing

By default the API generates a screenshot once everything is loaded. If the page executes JavaScript, you may want extra time before the image is rendered.
?

Adds extra time for JavaScript to execute before the screenshot is taken. Start with 500 milliseconds if the page renders blank.

?

Sets a limit on how long to wait before taking the screenshot when irrelevant content continues loading.

?

Waits for the page to signal that the screenshot is ready instead of capturing after normal loading.

Browser Context

These settings impact how Chrome is started, giving you more control when taking screenshots.
?

Set Chrome to render as if the user prefers light or dark mode.

Set Chrome to render the page using print or screen media styles.

?

Render the page with Chrome set to a specified timezone.

?

Attempt to block cookie/consent banners from displaying.

Send X-HCTI-SCREENSHOT: 1 with the top-level page navigation.

Preview

Your screenshot will appear here

Enter a URL, choose the settings you need, and generate the image.

Managed screenshots

Skip the fragile parts of native TypeScript screenshot automation

Keep the application code focused on the request and response while HCTI manages Chromium, page loading, render isolation, retries, and hosted output.

No browser runtime to maintain

Call the API from Node.js without bundling Chromium into the service or coordinating browser processes across workers.

Screenshot controls are already modeled

Set the viewport, full-page mode, selector, timing, color scheme, and browser state as request parameters instead of browser scripts.

A usable image URL immediately

Receive the hosted .png result without building a separate pipeline for temporary files, uploads, storage, and delivery.

URL screenshot API

Send one TypeScript request instead of running a browser

POST the webpage URL, capture settings, and format from TypeScript. HCTI handles the browser lifecycle and returns the generated .png URL.

  • Public webpage URL

    Send the URL to load, including webpages whose final state depends on browser-rendered JavaScript.

  • PNG output

    Set format to png and use the hosted .png URL returned by the API.

  • Viewport and crop controls

    Set viewport dimensions, capture the full page, or crop the result to a CSS selector.

  • Browser environment

    Choose color scheme, timezone, mobile behavior, timing, and other page-loading controls.

POST https://hcti.io/v1/image request example.
Request
POST https://hcti.io/v1/image
{
"url": "https://example.com",
"format": "png",
"viewport_width": 1200,
"viewport_height": 630
}

How it works

From webpage URL to a finished PNG

  1. Send the webpage URL

    Submit a public URL with format set to png and any viewport, selector, or browser settings.

  2. Chromium loads the page

    The API runs the webpage, styles, fonts, images, and JavaScript in a managed browser environment.

  3. Use the .png URL

    Embed the hosted result, download the file, or save it in your own storage and application records.

Output formats

One API, the format your workflow needs

Keep the same URL and capture settings. Choose lossless detail, compact compatibility, modern web delivery, or a paginated document.

Looking to convert HTML & CSS to PNG? Explore HTML to PNG in TypeScript with the HCTI npm package
Compact + universal
.jpeg

URL to JPEG

Smaller files and broad compatibility for photographic and content-heavy webpages.

Explore JPEG
Modern + efficient
.webp

URL to WebP

Strong visual quality with modern compression for web delivery.

Explore WebP
Document + printable
.pdf

URL to PDF

Paginated webpage captures with page sizing, margins, backgrounds, and print styles.

Explore PDF

Example code

Screenshot a webpage as PNG in TypeScript

Copy a complete TypeScript request. Authentication, the webpage URL, viewport settings, output format, and response handling are shown together.

import { HtmlCssToImageClient, CreateUrlImageRequest } from "@html-css-to-image/client";

const client = HtmlCssToImageClient.fromEnv();

const request = new CreateUrlImageRequest({
    url: "https://example.com",
    viewport_height: 630,
    viewport_width: 1200,
});

const result = await client.createImage(request);
if (result.success) {
    console.log(result.url);
} else {
    console.error(result.error);
}
Read the TypeScript Docs npm package

Ready to capture?

Take your first PNG webpage screenshot

Send a public URL to the API and receive a hosted .png image without running browser infrastructure.

Start free Read the API docs