HTMLCSStoImage API

Use the HTMLCSStoImage API via direct curl calls to generate images from HTML/CSS or capture screenshots of web pages.

Official docs: https://docs.htmlcsstoimage.com/

When to Use

Use this skill when you need to:

Generate images from HTML/CSS for social cards, thumbnails, certificates Screenshot web pages or specific elements on a page Create dynamic images with custom fonts and styling Generate OG images for social media sharing Prerequisites Sign up at HTMLCSStoImage and create an account Go to your Dashboard to get your User ID and API Key Store credentials in environment variables export HCTI_USER_ID="your-user-id" export HCTI_API_KEY="your-api-key"

Authentication

The API uses HTTP Basic Authentication:

Username: Your User ID Password: Your API Key Pricing Free tier: 50 images/month Paid plans available for higher volume

Important: When using $VAR in a command that pipes to another command, wrap the command containing $VAR in bash -c '...'. Due to a Claude Code bug, environment variables are silently cleared when pipes are used directly.

bash -c 'curl -s "https://api.example.com" -H "Authorization: Bearer $API_KEY"'

How to Use

All examples below assume you have HCTI_USER_ID and HCTI_API_KEY set.

The base URL for the API is:

https://hcti.io/v1/image 1. Simple HTML to Image

Generate an image from basic HTML.

Write to /tmp/hcti_html.txt:

Then run:

bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "html@/tmp/hcti_html.txt"'

Response:

{ "url": "https://hcti.io/v1/image/abc123..." }

The returned URL is permanent and served via Cloudflare CDN.

1. HTML with CSS Styling

Generate a styled card image.

Write to /tmp/hcti_html.txt:

Write to /tmp/hcti_css.txt:

.card { padding: 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; color: white; font-family: sans-serif; text-align: center; } h1 { margin: 0 0 10px 0; } p { margin: 0; opacity: 0.9; }

Then run:

bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "html@/tmp/hcti_html.txt" --data-urlencode "css@/tmp/hcti_css.txt"'

1. Use Google Fonts

Generate an image with custom fonts.

Write to /tmp/hcti_html.txt:

Write to /tmp/hcti_css.txt:

.title { font-family: Playfair Display; font-size: 48px; padding: 40px; background: #1a1a2e; color: #eee; }

Then run:

bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "html@/tmp/hcti_html.txt" --data-urlencode "css@/tmp/hcti_css.txt" -d "google_fonts=Playfair Display"'

Multiple fonts: google_fonts=Playfair Display|Roboto|Open Sans

1. Screenshot a Web Page (URL to Image)

Capture a screenshot of any public URL:

Write to /tmp/hcti_url.txt:

https://example.com

bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "url@/tmp/hcti_url.txt"'

1. Screenshot with Delay (for JavaScript)

Wait for JavaScript to render before capturing:

Write to /tmp/hcti_url.txt:

https://example.com

bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "url@/tmp/hcti_url.txt" -d "ms_delay=1500"'

ms_delay waits specified milliseconds before taking the screenshot.

1. Capture Specific Element (Selector)

Screenshot only a specific element on the page:

bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "url@/tmp/hcti_url.txt" -d "selector=h1"'

Use any CSS selector: #id, .class, div > p, etc.

1. High Resolution (Retina)

Generate 2x or 3x resolution images.

Write to /tmp/hcti_html.txt:

Then run:

bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "html@/tmp/hcti_html.txt" -d "device_scale=2"'

device_scale accepts values 1-3 (default: 1).

1. Custom Viewport Size

Set specific viewport dimensions:

bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "url@/tmp/hcti_url.txt" -d "viewport_width=1200" -d "viewport_height=630"'

Perfect for generating OG images (1200x630).

1. Full Page Screenshot

Capture the entire page height:

bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "url@/tmp/hcti_url.txt" -d "full_screen=true"'

1. Block Cookie Banners

Automatically hide consent/cookie popups:

bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "url@/tmp/hcti_url.txt" -d "block_consent_banners=true"'

1. Download Image Directly

Add ?dl=1 to the image URL to trigger download.

Write to /tmp/hcti_html.txt:

Then run:

bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "html@/tmp/hcti_html.txt"' | jq -r '.url'

This will output the image URL. Copy the URL and download with:

curl -s "https://hcti.io/v1/image/?dl=1" --output image.png

1. Resize on the Fly

Add width/height query parameters to resize.

Write to /tmp/hcti_html.txt:

Then run:

bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "html@/tmp/hcti_html.txt"' | jq -r '.url'

This outputs the image URL. Add query parameters to resize:

Original: https://hcti.io/v1/image/ Thumbnail: https://hcti.io/v1/image/?width=200&height=200

Response Format

Success (200):

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

Error (400):

{ "error": "Bad Request", "statusCode": 400, "message": "HTML is Required" }

Guidelines Use --data-urlencode for HTML/CSS: Properly encodes special characters URLs must be public: Pages requiring login cannot be screenshotted Use ms_delay for JS-heavy pages: Give time for JavaScript to render Choose appropriate device_scale: 2x for retina displays, 1x for standard Image URLs are permanent: They're cached on Cloudflare CDN globally Use selectors for cropping: More efficient than full page + manual crop