# Screenshots from HTML (`vojtam/screenshots-from-html`) Actor

Actor creates screenshots from a saved HTML structure.

- **URL**: https://apify.com/vojtam/screenshots-from-html.md
- **Developed by:** [Vojtěch Mašláň](https://apify.com/vojtam) (community)
- **Categories:** Automation, Open source
- **Features:** Full permissions
- **Stats:** 76 total users, 1 monthly users, 100.0% runs succeeded, 2 bookmarks
- **User rating**: No ratings yet

## Pricing

Pay per usage

This Actor is paid per platform usage. The Actor is free to use, and you only pay for the Apify platform usage, which gets cheaper the higher subscription plan you have.

Learn more: https://docs.apify.com/actors/running/actors-in-store.md#pay-per-usage

## What's an Apify Actor?

An Actor is a serverless cloud program that runs on the Apify platform. It has two run modes.
In Batch mode, an Actor accepts a well-defined JSON input, performs an action which can take anything from a few seconds to a few hours,
and optionally produces a well-defined JSON output, datasets with results, or files in key-value store.
In Standby mode, an Actor provides a web server which can be used as a website, API, or an MCP server.

Apify vocabulary and the platform model are defined once, in the agent quickstart at https://apify.com/agents.md.

## How to integrate an Actor?

If asked about integration, you help developers integrate Actors into their projects.
You adapt to their stack and deliver integrations that are safe, well-documented, and production-ready.

Do not guess an integration path. Every one of them is in the agent quickstart at https://apify.com/agents.md: the Apify MCP server, Agent Skills with the Apify CLI, the JavaScript and Python clients, the REST API, and the account-free path for an agent with no human to sign in. It also carries the rule on stating cost before the first paid run.

For examples already wired to this Actor's own input schema, see the [API](#api) section below.

Each client library has reference documentation the quickstart does not restate: [JavaScript/TypeScript](https://docs.apify.com/api/client/js/docs.md) (`npm install apify-client`) and [Python](https://docs.apify.com/api/client/python/docs.md) (`pip install apify-client`).

# README

### What does Screenshot from HTML Actor do?

This actor allows you to render and take screenshots of a saved HTML structure. You can provide the data from a dataset, key-value store or directly input the structure to actor.

### How much does it cost to use this actor?

You can create up to 3000 screenshots for 1 USD.

### Features

- Loading data from datasets
- Loading data from Key-value stores
- Loading HTML directly from input

### Input

- **html** - HTML structure you want to render
- **kvStoreId** - ID of KV store, you want to load input data from
- **kvStorePrefix** - if this option is set, only keys with given prefix will be used
- **datasetId** - ID of dataset, you want to load input data from
- **datasetSaveToDataset** - if set to true, output will be pushed to the default dataset, with new screenshotUrl field
- **datasetHtmlField** - name of a field, that contains HTML structure
- **datasetKeyFields** - item fields, that will create an unique key for the output screenshot
- **imageQuality** - quality of output JPEG screenshots, lowering this value can lower the size of the output
- **viewportWidth** - width of viewport
- **viewportHeight** - height of viewport

### Output

Output screenshots are stored either to the default key-value store or to the default dataset. File name for dataset screenshots is created by concatening the key fields with '\_'. File name for data from Key-value store is the same as the original key, if prefix option is set, prefix is removed from the final file name.
If you set the datasetOutput option to Dataset, the actor will output all the items to the default dataset with a new field called screenshotUrl.

### Saving HTML structure

Most of the websites are including resources (css, js, ...) with relative links e.g.: "/assets/styles.css".
To be able to properly render the website just from the HTML structure, you should add to the result structure the base element.
Base element sets base url, that will be used with relative links.

#### Adding base element with Puppeteer/Playwright

```js
await page.evaluate((url) => {
    const base = document.createElement('base');
    base.href = `${url.protocol}//${url.host}`;
    const head = document.head.prepend(base);
}, url);

const html = await page.content();
```

#### Adding base element without headless browser

```js
const html = body.replace('<head>', `<head><base href="${url.protocol}//${url.host}" />`);
```

# Actor input Schema

## `html` (type: `string`):

HTML that will be rendered

## `kvStoreId` (type: `string`):

ID of KV store with input data

## `kvStorePrefix` (type: `string`):

If provided, only key-value pairs with given key prefix will be used

## `datasetId` (type: `string`):

ID of dataset with input data

## `datasetHtmlField` (type: `string`):

Name of field, that contains HTML of a site

## `datasetKeyFields` (type: `array`):

Fields of dataset items, to create an unique key

## `datasetSaveToDataset` (type: `boolean`):

If true, actor will create new dataset with new field screenshotUrl for each item

## `imageQuality` (type: `integer`):

Quality of output image. Has to be in range 1-100.

## `viewportWidth` (type: `integer`):

Viewport width

## `viewportHeight` (type: `integer`):

Viewport height

## Actor input object example

```json
{
  "html": "",
  "kvStoreId": "",
  "kvStorePrefix": "",
  "datasetId": "",
  "datasetHtmlField": "",
  "datasetKeyFields": [],
  "datasetSaveToDataset": true,
  "imageQuality": 80,
  "viewportWidth": 1920,
  "viewportHeight": 1080
}
```

# API

You can run this Actor programmatically using our API. Below are code examples in JavaScript, Python, and CLI, as well as the OpenAPI specification and MCP server setup.

## JavaScript example

```javascript
import { ApifyClient } from 'apify-client';

// Initialize the ApifyClient with your Apify API token
// Replace the '<YOUR_API_TOKEN>' with your token
const client = new ApifyClient({
    token: '<YOUR_API_TOKEN>',
});

// Prepare Actor input
const input = {
    "html": "",
    "kvStoreId": "",
    "kvStorePrefix": "",
    "datasetId": "",
    "datasetHtmlField": "",
    "datasetKeyFields": []
};

// Run the Actor and wait for it to finish
const run = await client.actor("vojtam/screenshots-from-html").call(input);

// Fetch and print Actor results from the run's dataset (if any)
console.log('Results from dataset');
console.log(`💾 Check your data here: https://console.apify.com/storage/datasets/${run.defaultDatasetId}`);
const { items } = await client.dataset(run.defaultDatasetId).listItems();
items.forEach((item) => {
    console.dir(item);
});

// 📚 Want to learn more 📖? Go to → https://docs.apify.com/api/client/js/docs

```

## Python example

```python
from apify_client import ApifyClient

# Initialize the ApifyClient with your Apify API token
# Replace '<YOUR_API_TOKEN>' with your token.
client = ApifyClient("<YOUR_API_TOKEN>")

# Prepare the Actor input
run_input = {
    "html": "",
    "kvStoreId": "",
    "kvStorePrefix": "",
    "datasetId": "",
    "datasetHtmlField": "",
    "datasetKeyFields": [],
}

# Run the Actor and wait for it to finish
run = client.actor("vojtam/screenshots-from-html").call(run_input=run_input)

# Fetch and print Actor results from the run's dataset (if there are any)
print(f"💾 Check your data here: https://console.apify.com/storage/datasets/{run.default_dataset_id}")
for item in client.dataset(run.default_dataset_id).iterate_items():
    print(item)

# 📚 Want to learn more 📖? Go to → https://docs.apify.com/api/client/python/docs/quick-start

```

## CLI example

```bash
echo '{
  "html": "",
  "kvStoreId": "",
  "kvStorePrefix": "",
  "datasetId": "",
  "datasetHtmlField": "",
  "datasetKeyFields": []
}' |
apify call vojtam/screenshots-from-html --silent --output-dataset

```

## MCP server setup

```json
{
    "mcpServers": {
        "apify": {
            "type": "http",
            "url": "https://mcp.apify.com/?tools=fetch-actor-details,vojtam/screenshots-from-html"
        }
    }
}
```

The hosted server signs you in with OAuth on first connect, so no API token belongs in this config. Clients without OAuth support can send an `Authorization: Bearer <APIFY_API_TOKEN>` header instead, using a token from API & Integrations in Apify Console (https://console.apify.com/settings/integrations).

## OpenAPI specification

Download the OpenAPI definition: https://api.apify.com/v2/actors/bk6jxhZdTUCoZReJz/builds/oaEnkh94jljMgChYs/openapi.json