API Documentation

HTML & CSS to Image / PDF API

Convert your HTML and CSS templates into sharp images or printable documents quickly and reliably. Whenever you post your design to the endpoint, the server processes your markup and responds with a direct public link where your rendered file is stored on Cloudflare R2.

Traffic Management

Rate Limiter

To maintain smooth performance for everyone, requests are rate-limited by IP address:

Each client IP can send up to 60 requests per minute.
If you send requests faster than this threshold, the API will respond with status code 429 Too Many Requests along with a clear message asking you to slow down.

Endpoint Reference

POST /api/render

Submit your render requests using a standard POST call with a JSON payload to the /api/render endpoint.

POST http://127.0.0.1:8787/api/render

JSON In → URL Out

Request Options

Here is every field you can include in your request body:

Parameter	Type	Details & Constraints
html Required string	Body	The full HTML code you want to render into an image or PDF document. You can include up to `10 MB` of markup. Any remote images and emojis inside will be fetched and processed automatically.
css Optional string	Body	Additional CSS style rules to inject alongside your markup. If you leave this out, it simply defaults to an empty string.
format Optional string	Body	Choose what kind of file to produce: `png`, `jpeg`, `webp`, or `pdf`. When omitted, it defaults to `png`.
width Optional integer	Body	The width of the render area in pixels. You can specify any value between `50` and `3840`. The default width is `1200`. This setting does not apply when rendering PDFs.
height Optional integer	Body	The height of the render area in pixels. Accepts values between `50` and `2160`, with a default of `630`. This setting does not apply when rendering PDFs.
pageSize Optional string	Body	The physical page size used whenever your format is set to `pdf`. Choose between `a4` (the default) or `letter`.
fontFamily Optional string	Body	The name of a Google Font to download and apply to your text, such as `Inter`, `Roboto`, or `Open Sans`. Defaults to `Inter`.

# Send a POST request to http://127.0.0.1:8787/api/render
curl -X POST "http://127.0.0.1:8787/api/render" \
  -H "Content-Type: application/json" \
  -d '{
    "html": "<div class=\"invoice\"><h1>Invoice #4201</h1><p>Status: Paid</p></div>",
    "css": ".invoice { padding: 32px; background: #533afd; color: #fff; font-family: Inter; }",
    "format": "png",
    "width": 1200,
    "height": 630
  }'

// Send a POST request to /api/render
const response = await fetch("http://127.0.0.1:8787/api/render", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    html: "<h1>Hello Edge</h1><p>Generated via API</p>",
    css: "h1 { color: #533afd; font-family: Inter, sans-serif; }",
    format: "png",
    width: 1200,
    height: 630
  })
});

const data = await response.json();
console.log("Public R2 File URL:", data.url);

import requests

payload = {
    "html": "<h1>Invoice</h1><p>Thank you for your business</p>",
    "css": "h1 { color: #533afd; }",
    "format": "pdf",
    "pageSize": "a4"
}

# Send a POST request to /api/render
response = requests.post(
    "http://127.0.0.1:8787/api/render",
    json=payload
)

data = response.json()
print("Public R2 Link:", data.get("url"))

Sample JSON Response (HTTP 200 OK)

{
  "url": "https://pub-3ec5d518195b4d1a9ca45288e77bc3c1.r2.dev/renders/abcxyz.png",
  "format": "png",
  "width": 1200,
  "height": 630,
  "renderTimeMs": 84,
  "status": "Passed"
}

Rendering Engine

Compatibility & Validation

Because the rendering engine runs inside isolated WebAssembly Workers for maximum speed and security, certain CSS and HTML capabilities are optimized as follows:

Feature	Status	Engine Behavior & Guidance
Flexbox	Fully Supported	Standard Flexbox properties like row, column, wrap, and gap are fully supported and recommended for all layouts.
CSS Grid	Partial	Basic grid containers work, but nested Flexbox layouts are more predictable across WebAssembly engines.
Google Fonts	Auto-Loaded	The engine scans your text content and automatically fetches required font subsets for Latin, Arabic, CJK, Devanagari, and Hebrew scripts.
Unicode Emojis	Twemoji Auto-Inlined	Any emoji characters found in your text are converted into high-resolution vector Twemoji graphics automatically.
External Images	Auto-Transcoded	Images linked with web URLs are fetched, safely optimized, and embedded into the render directly.

Interactive Environment

Visual Playground

Looking for a live interface to design and experiment with templates? Our visual playground lets you test HTML and CSS changes with instant visual feedback and direct link generation.

Try templates in the interactive playground

Adjust custom dimensions, test different Google Fonts, preview PDF documents, and copy resulting Cloudflare R2 links in real time.

Launch Playground →