# HTML to Social Media Image Renderer (`kuralab/html-sns-renderer`) Actor

Render HTML/CSS into pixel-perfect social media images - Pinterest pins, OG images, X cards, Instagram posts, YouTube thumbnails. Send HTML, get a public PNG/JPEG URL back as structured JSON. Full Chromium rendering with web fonts and emoji. Built for AI agents and automations. MCP-ready.

- **URL**: https://apify.com/kuralab/html-sns-renderer.md
- **Developed by:** [廣河 佐藤](https://apify.com/kuralab) (community)
- **Categories:** Automation, AI, Developer tools
- **Stats:** 2 total users, 1 monthly users, 100.0% runs succeeded, 0 bookmarks
- **User rating**: No ratings yet

## Pricing

from $1.00 / 1,000 results

This Actor is paid per event. You are not charged for the Apify platform usage, but only a fixed price for specific events.

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

## What's an Apify Actor?

Actors are web data automations that power AI and operations. They run on the Apify platform to scrape websites, process data, connect APIs, and automate workflows.
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.
Actors are written with capital "A".

## 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.
The best way to integrate Actors is as follows.

In JavaScript/TypeScript projects, use official [JavaScript/TypeScript client](https://docs.apify.com/api/client/js/docs.md):

```bash
npm install apify-client
```

In Python projects, use official [Python client library](https://docs.apify.com/api/client/python/docs.md):

```bash
pip install apify-client
```

In shell scripts, use [Apify CLI](https://docs.apify.com/cli/docs.md):

````bash
# MacOS / Linux
curl -fsSL https://apify.com/install-cli.sh | bash
# Windows
irm https://apify.com/install-cli.ps1 | iex
```bash

In AI frameworks, you might use the [Apify MCP server](https://docs.apify.com/integrations/mcp.md).

If your project is in a different language, use the [REST API](https://docs.apify.com/api/v2.md).

For usage examples, see the [API](#api) section below.

For more details, see Apify documentation as [Markdown index](https://docs.apify.com/llms.txt) and [Markdown full-text](https://docs.apify.com/llms-full.txt).


# README

## HTML to Social Media Image Renderer

Turn any HTML/CSS into a pixel-perfect social media image. Send HTML, get back a public URL to a PNG/JPEG rendered at the exact canvas size you asked for.

Built for **AI agents and automation pipelines** that need to convert text/data into shareable visuals — Pinterest pins, OG images, X/Twitter cards, Instagram posts, YouTube thumbnails, quote cards, price tables, weekly report graphics.

### Why this Actor

- **Exact canvas control** — you set `width`×`height`, your HTML renders on that canvas. No cropping surprises.
- **Structured output** — the result is JSON with a stable `imageUrl` (public key-value store link). No parsing needed.
- **Web-font & emoji ready** — full Chromium rendering. Inline `<style>`, Google Fonts `<link>`, flexbox/grid all work.
- **Fast & cheap** — a typical card renders in ~2-3 seconds.

### Using from MCP (AI agents)

This Actor is callable through the [Apify MCP server](https://mcp.apify.com). Once connected, an agent can call it like a tool:

```json
{
  "html": "<div style='width:1000px;height:1500px;background:#1a1a2e;color:#fff;font-family:sans-serif;padding:80px'><h1 style='font-size:80px'>5 Kitchen Storage Hacks</h1><p style='font-size:44px;color:#ffd166'>that actually survive Monday mornings</p></div>",
  "width": 1000,
  "height": 1500,
  "format": "png"
}
````

The dataset item returned:

```json
{
  "imageUrl": "https://api.apify.com/v2/key-value-stores/XXXX/records/image.png",
  "width": 1000,
  "height": 1500,
  "format": "png",
  "bytes": 152340,
  "renderMs": 2400
}
```

### Common canvas sizes

| Use case | width × height |
|---|---|
| Pinterest pin (2:3) | 1000 × 1500 |
| OG image / link card | 1200 × 630 |
| X/Twitter card (16:9) | 1200 × 675 |
| Instagram post | 1080 × 1080 |
| YouTube thumbnail | 1280 × 720 |

Long infographics: set `fullPage: true` and the full document height is captured.

### Input reference

See the Input tab. Required: `html`. Optional: `width` (default 1000), `height` (default 1500), `format` (`png`|`jpeg`), `jpegQuality`, `fullPage`, `waitMs` (extra settle time for web fonts).

### Limits

- HTML input up to 2MB. External assets must be publicly reachable.
- Canvas 100–4000px per side.

***

### 日本語

HTML/CSSをそのままSNS画像（PNG/JPEG）に変換するAPIです。Pinterestピン、OGP画像、Xカード、Instagram投稿、YouTubeサムネイル、引用カードなどを、AIエージェントや自動化パイプラインから1リクエストで生成できます。

- `html` を送ると、指定した `width`×`height` のキャンバスでChromiumがレンダリングし、公開URL付きのJSONが返ります
- 日本語フォント・絵文字対応。Google Fontsの `<link>` もそのまま使えます
- Apify MCPサーバー経由でAIエージェントのツールとしても呼び出せます

制作: kuralab

# Actor input Schema

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

Full HTML document or fragment to render. Include inline <style> for custom fonts/colors. The viewport is set by `width` and `height`, so design your HTML for that exact canvas size. Example: '<div style="width:1000px;height:1500px;background:#6B8F71;color:white;font-size:60px;padding:80px">Hello Pinterest</div>'

## `width` (type: `integer`):

Canvas/viewport width in pixels. Common sizes: 1000 (Pinterest pin), 1200 (OG image / X card), 1080 (Instagram post), 1280 (YouTube thumbnail).

## `height` (type: `integer`):

Canvas/viewport height in pixels. Common sizes: 1500 (Pinterest 2:3 pin), 630 (OG image), 675 (X card 16:9), 1080 (Instagram square), 720 (YouTube thumbnail).

## `format` (type: `string`):

Image format of the output file. Use 'png' for graphics with text and flat colors (sharpest), 'jpeg' for photo-heavy images (smaller file).

## `jpegQuality` (type: `integer`):

Quality 1-100, used only when format is 'jpeg'.

## `fullPage` (type: `boolean`):

If true, ignores `height` and captures the full rendered document height (useful for long vertical infographics).

## `waitMs` (type: `integer`):

Extra milliseconds to wait after page load before taking the screenshot (for web fonts or animations to settle). 0-10000.

## Actor input object example

```json
{
  "html": "<div style=\"width:1000px;height:1500px;background:linear-gradient(160deg,#6B8F71,#4a6b52);color:#fff;font-family:sans-serif;padding:80px;box-sizing:border-box\"><h1 style=\"font-size:90px;line-height:1.2;margin:0\">Turn HTML into images</h1><p style=\"font-size:44px;color:#EAF1EB;margin-top:40px\">Pinterest pins, OG images, X cards — rendered by API</p></div>",
  "width": 1000,
  "height": 1500,
  "format": "png",
  "jpegQuality": 85,
  "fullPage": false,
  "waitMs": 300
}
```

# 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": "<div style=\"width:1000px;height:1500px;background:linear-gradient(160deg,#6B8F71,#4a6b52);color:#fff;font-family:sans-serif;padding:80px;box-sizing:border-box\"><h1 style=\"font-size:90px;line-height:1.2;margin:0\">Turn HTML into images</h1><p style=\"font-size:44px;color:#EAF1EB;margin-top:40px\">Pinterest pins, OG images, X cards — rendered by API</p></div>"
};

// Run the Actor and wait for it to finish
const run = await client.actor("kuralab/html-sns-renderer").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": "<div style=\"width:1000px;height:1500px;background:linear-gradient(160deg,#6B8F71,#4a6b52);color:#fff;font-family:sans-serif;padding:80px;box-sizing:border-box\"><h1 style=\"font-size:90px;line-height:1.2;margin:0\">Turn HTML into images</h1><p style=\"font-size:44px;color:#EAF1EB;margin-top:40px\">Pinterest pins, OG images, X cards — rendered by API</p></div>" }

# Run the Actor and wait for it to finish
run = client.actor("kuralab/html-sns-renderer").call(run_input=run_input)

# Fetch and print Actor results from the run's dataset (if there are any)
print("💾 Check your data here: https://console.apify.com/storage/datasets/" + run["defaultDatasetId"])
for item in client.dataset(run["defaultDatasetId"]).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": "<div style=\\"width:1000px;height:1500px;background:linear-gradient(160deg,#6B8F71,#4a6b52);color:#fff;font-family:sans-serif;padding:80px;box-sizing:border-box\\"><h1 style=\\"font-size:90px;line-height:1.2;margin:0\\">Turn HTML into images</h1><p style=\\"font-size:44px;color:#EAF1EB;margin-top:40px\\">Pinterest pins, OG images, X cards — rendered by API</p></div>"
}' |
apify call kuralab/html-sns-renderer --silent --output-dataset

```

## MCP server setup

```json
{
    "mcpServers": {
        "apify": {
            "command": "npx",
            "args": [
                "mcp-remote",
                "https://mcp.apify.com/?tools=kuralab/html-sns-renderer",
                "--header",
                "Authorization: Bearer <YOUR_API_TOKEN>"
            ]
        }
    }
}

```

## OpenAPI specification

```json
{
    "openapi": "3.0.1",
    "info": {
        "title": "HTML to Social Media Image Renderer",
        "description": "Render HTML/CSS into pixel-perfect social media images - Pinterest pins, OG images, X cards, Instagram posts, YouTube thumbnails. Send HTML, get a public PNG/JPEG URL back as structured JSON. Full Chromium rendering with web fonts and emoji. Built for AI agents and automations. MCP-ready.",
        "version": "0.1",
        "x-build-id": "CZKPBdPSqbv6T6SYh"
    },
    "servers": [
        {
            "url": "https://api.apify.com/v2"
        }
    ],
    "paths": {
        "/acts/kuralab~html-sns-renderer/run-sync-get-dataset-items": {
            "post": {
                "operationId": "run-sync-get-dataset-items-kuralab-html-sns-renderer",
                "x-openai-isConsequential": false,
                "summary": "Executes an Actor, waits for its completion, and returns Actor's dataset items in response.",
                "tags": [
                    "Run Actor"
                ],
                "requestBody": {
                    "required": true,
                    "content": {
                        "application/json": {
                            "schema": {
                                "$ref": "#/components/schemas/inputSchema"
                            }
                        }
                    }
                },
                "parameters": [
                    {
                        "name": "token",
                        "in": "query",
                        "required": true,
                        "schema": {
                            "type": "string"
                        },
                        "description": "Enter your Apify token here"
                    }
                ],
                "responses": {
                    "200": {
                        "description": "OK"
                    }
                }
            }
        },
        "/acts/kuralab~html-sns-renderer/runs": {
            "post": {
                "operationId": "runs-sync-kuralab-html-sns-renderer",
                "x-openai-isConsequential": false,
                "summary": "Executes an Actor and returns information about the initiated run in response.",
                "tags": [
                    "Run Actor"
                ],
                "requestBody": {
                    "required": true,
                    "content": {
                        "application/json": {
                            "schema": {
                                "$ref": "#/components/schemas/inputSchema"
                            }
                        }
                    }
                },
                "parameters": [
                    {
                        "name": "token",
                        "in": "query",
                        "required": true,
                        "schema": {
                            "type": "string"
                        },
                        "description": "Enter your Apify token here"
                    }
                ],
                "responses": {
                    "200": {
                        "description": "OK",
                        "content": {
                            "application/json": {
                                "schema": {
                                    "$ref": "#/components/schemas/runsResponseSchema"
                                }
                            }
                        }
                    }
                }
            }
        },
        "/acts/kuralab~html-sns-renderer/run-sync": {
            "post": {
                "operationId": "run-sync-kuralab-html-sns-renderer",
                "x-openai-isConsequential": false,
                "summary": "Executes an Actor, waits for completion, and returns the OUTPUT from Key-value store in response.",
                "tags": [
                    "Run Actor"
                ],
                "requestBody": {
                    "required": true,
                    "content": {
                        "application/json": {
                            "schema": {
                                "$ref": "#/components/schemas/inputSchema"
                            }
                        }
                    }
                },
                "parameters": [
                    {
                        "name": "token",
                        "in": "query",
                        "required": true,
                        "schema": {
                            "type": "string"
                        },
                        "description": "Enter your Apify token here"
                    }
                ],
                "responses": {
                    "200": {
                        "description": "OK"
                    }
                }
            }
        }
    },
    "components": {
        "schemas": {
            "inputSchema": {
                "type": "object",
                "required": [
                    "html"
                ],
                "properties": {
                    "html": {
                        "title": "HTML content",
                        "type": "string",
                        "description": "Full HTML document or fragment to render. Include inline <style> for custom fonts/colors. The viewport is set by `width` and `height`, so design your HTML for that exact canvas size. Example: '<div style=\"width:1000px;height:1500px;background:#6B8F71;color:white;font-size:60px;padding:80px\">Hello Pinterest</div>'"
                    },
                    "width": {
                        "title": "Image width (px)",
                        "minimum": 100,
                        "maximum": 4000,
                        "type": "integer",
                        "description": "Canvas/viewport width in pixels. Common sizes: 1000 (Pinterest pin), 1200 (OG image / X card), 1080 (Instagram post), 1280 (YouTube thumbnail).",
                        "default": 1000
                    },
                    "height": {
                        "title": "Image height (px)",
                        "minimum": 100,
                        "maximum": 4000,
                        "type": "integer",
                        "description": "Canvas/viewport height in pixels. Common sizes: 1500 (Pinterest 2:3 pin), 630 (OG image), 675 (X card 16:9), 1080 (Instagram square), 720 (YouTube thumbnail).",
                        "default": 1500
                    },
                    "format": {
                        "title": "Output format",
                        "enum": [
                            "png",
                            "jpeg"
                        ],
                        "type": "string",
                        "description": "Image format of the output file. Use 'png' for graphics with text and flat colors (sharpest), 'jpeg' for photo-heavy images (smaller file).",
                        "default": "png"
                    },
                    "jpegQuality": {
                        "title": "JPEG quality",
                        "minimum": 1,
                        "maximum": 100,
                        "type": "integer",
                        "description": "Quality 1-100, used only when format is 'jpeg'.",
                        "default": 85
                    },
                    "fullPage": {
                        "title": "Capture full page height",
                        "type": "boolean",
                        "description": "If true, ignores `height` and captures the full rendered document height (useful for long vertical infographics).",
                        "default": false
                    },
                    "waitMs": {
                        "title": "Extra wait before capture (ms)",
                        "minimum": 0,
                        "maximum": 10000,
                        "type": "integer",
                        "description": "Extra milliseconds to wait after page load before taking the screenshot (for web fonts or animations to settle). 0-10000.",
                        "default": 300
                    }
                }
            },
            "runsResponseSchema": {
                "type": "object",
                "properties": {
                    "data": {
                        "type": "object",
                        "properties": {
                            "id": {
                                "type": "string"
                            },
                            "actId": {
                                "type": "string"
                            },
                            "userId": {
                                "type": "string"
                            },
                            "startedAt": {
                                "type": "string",
                                "format": "date-time",
                                "example": "2025-01-08T00:00:00.000Z"
                            },
                            "finishedAt": {
                                "type": "string",
                                "format": "date-time",
                                "example": "2025-01-08T00:00:00.000Z"
                            },
                            "status": {
                                "type": "string",
                                "example": "READY"
                            },
                            "meta": {
                                "type": "object",
                                "properties": {
                                    "origin": {
                                        "type": "string",
                                        "example": "API"
                                    },
                                    "userAgent": {
                                        "type": "string"
                                    }
                                }
                            },
                            "stats": {
                                "type": "object",
                                "properties": {
                                    "inputBodyLen": {
                                        "type": "integer",
                                        "example": 2000
                                    },
                                    "rebootCount": {
                                        "type": "integer",
                                        "example": 0
                                    },
                                    "restartCount": {
                                        "type": "integer",
                                        "example": 0
                                    },
                                    "resurrectCount": {
                                        "type": "integer",
                                        "example": 0
                                    },
                                    "computeUnits": {
                                        "type": "integer",
                                        "example": 0
                                    }
                                }
                            },
                            "options": {
                                "type": "object",
                                "properties": {
                                    "build": {
                                        "type": "string",
                                        "example": "latest"
                                    },
                                    "timeoutSecs": {
                                        "type": "integer",
                                        "example": 300
                                    },
                                    "memoryMbytes": {
                                        "type": "integer",
                                        "example": 1024
                                    },
                                    "diskMbytes": {
                                        "type": "integer",
                                        "example": 2048
                                    }
                                }
                            },
                            "buildId": {
                                "type": "string"
                            },
                            "defaultKeyValueStoreId": {
                                "type": "string"
                            },
                            "defaultDatasetId": {
                                "type": "string"
                            },
                            "defaultRequestQueueId": {
                                "type": "string"
                            },
                            "buildNumber": {
                                "type": "string",
                                "example": "1.0.0"
                            },
                            "containerUrl": {
                                "type": "string"
                            },
                            "usage": {
                                "type": "object",
                                "properties": {
                                    "ACTOR_COMPUTE_UNITS": {
                                        "type": "integer",
                                        "example": 0
                                    },
                                    "DATASET_READS": {
                                        "type": "integer",
                                        "example": 0
                                    },
                                    "DATASET_WRITES": {
                                        "type": "integer",
                                        "example": 0
                                    },
                                    "KEY_VALUE_STORE_READS": {
                                        "type": "integer",
                                        "example": 0
                                    },
                                    "KEY_VALUE_STORE_WRITES": {
                                        "type": "integer",
                                        "example": 1
                                    },
                                    "KEY_VALUE_STORE_LISTS": {
                                        "type": "integer",
                                        "example": 0
                                    },
                                    "REQUEST_QUEUE_READS": {
                                        "type": "integer",
                                        "example": 0
                                    },
                                    "REQUEST_QUEUE_WRITES": {
                                        "type": "integer",
                                        "example": 0
                                    },
                                    "DATA_TRANSFER_INTERNAL_GBYTES": {
                                        "type": "integer",
                                        "example": 0
                                    },
                                    "DATA_TRANSFER_EXTERNAL_GBYTES": {
                                        "type": "integer",
                                        "example": 0
                                    },
                                    "PROXY_RESIDENTIAL_TRANSFER_GBYTES": {
                                        "type": "integer",
                                        "example": 0
                                    },
                                    "PROXY_SERPS": {
                                        "type": "integer",
                                        "example": 0
                                    }
                                }
                            },
                            "usageTotalUsd": {
                                "type": "number",
                                "example": 0.00005
                            },
                            "usageUsd": {
                                "type": "object",
                                "properties": {
                                    "ACTOR_COMPUTE_UNITS": {
                                        "type": "integer",
                                        "example": 0
                                    },
                                    "DATASET_READS": {
                                        "type": "integer",
                                        "example": 0
                                    },
                                    "DATASET_WRITES": {
                                        "type": "integer",
                                        "example": 0
                                    },
                                    "KEY_VALUE_STORE_READS": {
                                        "type": "integer",
                                        "example": 0
                                    },
                                    "KEY_VALUE_STORE_WRITES": {
                                        "type": "number",
                                        "example": 0.00005
                                    },
                                    "KEY_VALUE_STORE_LISTS": {
                                        "type": "integer",
                                        "example": 0
                                    },
                                    "REQUEST_QUEUE_READS": {
                                        "type": "integer",
                                        "example": 0
                                    },
                                    "REQUEST_QUEUE_WRITES": {
                                        "type": "integer",
                                        "example": 0
                                    },
                                    "DATA_TRANSFER_INTERNAL_GBYTES": {
                                        "type": "integer",
                                        "example": 0
                                    },
                                    "DATA_TRANSFER_EXTERNAL_GBYTES": {
                                        "type": "integer",
                                        "example": 0
                                    },
                                    "PROXY_RESIDENTIAL_TRANSFER_GBYTES": {
                                        "type": "integer",
                                        "example": 0
                                    },
                                    "PROXY_SERPS": {
                                        "type": "integer",
                                        "example": 0
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
```