# HTML/CSS to Image API

> API for converting HTML and CSS to high-quality images (PNG, JPG, WebP, PDF). Renders exactly like Google Chrome.

## Quick Start

- **Endpoint:** `POST https://hcti.io/v1/image`
- **Authentication:** HTTP Basic Auth (User ID + API Key)
- **Get credentials:** https://htmlcsstoimage.com/dashboard

## Example Request

```bash
curl -X POST https://hcti.io/v1/image \
  -u 'your-user-id:your-api-key' \
  -H 'Content-Type: application/json' \
  -d '{"html": "<div style=\"padding:20px;background:#4f46e5;color:white;\">Hello World</div>"}'
```

## Response

```json
{
  "url": "https://hcti.io/v1/image/be4c5118-fe19-462b-a49e-48cf72697a9d",
  "id": "be4c5118-fe19-462b-a49e-48cf72697a9d"
}
```

## Capabilities

- Convert HTML/CSS to images (PNG, JPG, WebP, PDF)
- Screenshot any public URL
- Batch create up to 25 images in one request
- Reusable templates with variable substitution
- Visual Template Editor for building saved templates from blocks in the dashboard
- MCP Server integration for AI assistants (Cursor, Claude, Windsurf)
- HTTP proxy support for routing render traffic through your own proxy
- Custom storage destinations for saving renders to your own S3-compatible bucket
- Global CDN delivery via Cloudflare

## Key Parameters

| Parameter | Description |
|-----------|-------------|
| `html` | HTML to render (required unless using `url`) |
| `css` | CSS styles for your HTML |
| `url` | URL to screenshot (required unless using `html`) |
| `google_fonts` | Google Fonts to load |
| `device_scale` | Pixel ratio (1-3) for retina images |
| `viewport_width` | Browser viewport width |
| `viewport_height` | Browser viewport height |
| `viewport_mobile` | Emulate a mobile viewport |
| `viewport_landscape` | Render the viewport in landscape orientation |
| `viewport_touch` | Enable touch support in the viewport |
| `media_type` | Apply `screen` or `print` CSS media styles |
| `headers` | Add custom HTTP headers to a URL screenshot |
| `additional_header_origins` | Additional exact HTTP(S) origins allowed to receive custom headers |
| `include_headers_on_subrequests` | Also send custom headers with subrequests to allowed origins |
| `identify_as_hcti` | Identify the top-level request with `X-HCTI-SCREENSHOT: 1` |
| `selector` | CSS selector to capture specific element |
| `ms_delay` | Milliseconds to wait before capture |
| `transparent_background` | Set to `true` to render a transparent PNG |
| `storage_destination_id` | Save rendered files to a configured storage destination |
| `jumbo_max_width` | Max output width for jumbo renders (up to 80,000px). Must be set with `jumbo_max_height`. |
| `jumbo_max_height` | Max output height for jumbo renders (up to 80,000px). Must be set with `jumbo_max_width`. |

With **Disable HCTI Storage**, authenticate the returned `/v1/store/...` URL with an HTTP Basic `PUT` request using API credentials from the same organization as the image. Its HTTP 200 or 424 JSON response reports the overall outcome plus status, target, bucket, and key for the base image and any transformation.

## Documentation

- **API Reference:** https://docs.htmlcsstoimage.com/getting-started/using-the-api/
- **Code Examples:** https://docs.htmlcsstoimage.com/example-code/
- **Parameters:** https://docs.htmlcsstoimage.com/parameters/
- **Templates API:** https://docs.htmlcsstoimage.com/getting-started/templates/
- **Template Editor:** https://docs.htmlcsstoimage.com/template-editor/
- **Template Editor Variables:** https://docs.htmlcsstoimage.com/template-editor/variables/
- **Template Editor Blocks:** https://docs.htmlcsstoimage.com/template-editor/blocks/
- **MCP Server:** https://docs.htmlcsstoimage.com/integrations/mcp/
- **n8n Integration:** https://docs.htmlcsstoimage.com/integrations/n8n/
- **TypeScript Client (npm):** https://docs.htmlcsstoimage.com/example-code/typescript/
- **HTTP Proxies:** https://docs.htmlcsstoimage.com/guides/advanced/proxies/
- **Storage Destinations:** https://docs.htmlcsstoimage.com/guides/advanced/storage-destinations/
- **Jumbo Images:** https://docs.htmlcsstoimage.com/guides/advanced/jumbo-images/
- **Viewport Parameters:** https://docs.htmlcsstoimage.com/parameters/viewport/
- **CSS Media Type:** https://docs.htmlcsstoimage.com/parameters/media_type/
- **Custom Request Headers:** https://docs.htmlcsstoimage.com/parameters/headers/
- **Identify HCTI Requests:** https://docs.htmlcsstoimage.com/parameters/identify_as_hcti/
- **Cloudflare Challenges:** https://docs.htmlcsstoimage.com/guides/debugging/cloudflare-challenges/
- **Transparent Backgrounds:** https://docs.htmlcsstoimage.com/guides/styling/transparent-background/
- **FAQ:** https://docs.htmlcsstoimage.com/faq/

## Integrations

- **Zapier:** https://docs.htmlcsstoimage.com/integrations/zapier/
- **Make:** https://docs.htmlcsstoimage.com/integrations/make/
- **n8n:** https://docs.htmlcsstoimage.com/integrations/n8n/
- **MCP Server:** https://docs.htmlcsstoimage.com/integrations/mcp/
- **TypeScript Client (npm):** https://docs.htmlcsstoimage.com/example-code/typescript/

## Code Examples Available

Python, PHP, JavaScript, TypeScript, Ruby, Go, C#, VB.NET, cURL, Google Apps Script

## Support

Email: support@htmlcsstoimage.com