Documentation for the HTML/CSS to Image API
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitbook/assets
advanced-examples
example-code
getting-started
README.md
SUMMARY.md

README.md

description
Introduction and examples for the HTML/CSS to Image API.

HTML/CSS to Image API

Converting HTML/CSS into images

No dependencies to manage. Super simple HTTP API. We've figured out the complexities and details of rendering images from HTML for you.

Your code is run in an isolated instance of Google Chrome. Allowing us to replicate the exact, high quality image you're looking for.

Built in support for Google Fonts, emoji rendering, CSS3 and HTML5.

Examples

The API can be used to programmatically render images from any HTML/CSS. Autogenerate images from your applications backend.

Social Sharing Cards

Generate social cards for your content on the fly. Fill in your og:image tags automatically, resulting in more sharing and clicks across Twitter and Facebook. Here's an example.

URL: https://hcti.io/v1/image/dbd3b3f1-a266-42bb-808c-c565bb752af4?width=600

Source code for this example on CodePen.

Highlighted Text Shots

Generate images from your users comments. Add the ability to highlight and share.

URL: https://hcti.io/v1/image/cd514452-b86c-4ab3-b109-2ef13a7ed00c

Source code for this example on CodePen.

Auto Generated Job Listing

Generate images from job listings for sharing in emails, ads or social media.

URL: https://hcti.io/v1/image/3bf60f9f-579f-4a88-8534-a1a936ffd15e?width=600

Source code for this example on CodePen.

Full Webpage Screenshots

Pass an entire webpage to the API to generate a full page screenshot. Here we passed stripe.com's homepage HTML to the API.

URL: https://hcti.io/v1/image/2ac52eb8-0c20-4ac6-b0e3-06fb5f421f4a

{% hint style="info" %}

Full page screenshots

When rendering an entire page, be sure to include all of the markup. Including the <html> tags. All external assets (css, javascript, images) must be loaded using a full URL. Relative ****paths will not work. {% endhint %}

Resize on the Fly

Once an image is generated, use our API to adjust the image to any size you need with the width and height params. When only one param is passed, the API will maintain the aspect ratio of the original image.

?width=400

URL: https://hcti.io/v1/image/cd514452-b86c-4ab3-b109-2ef13a7ed00c?width=400

?width=400&height=400

URL: https://hcti.io/v1/image/cd514452-b86c-4ab3-b109-2ef13a7ed00c?width=400&height=400

?height=300

URL: https://hcti.io/v1/image/cd514452-b86c-4ab3-b109-2ef13a7ed00c?height=300

Get an API key

To use this API, you'll first need an API key. You may retrieve one by signing up here.

Start creating images from HTML/CSS

Now that you have an API key, get started creating your first image.

Features

Superior rendering

Renders your <markup> just like Google Chrome would. Supports CSS3. Get just the look you want.

Global CDN

Don't worry about bandwidth. We render once and cache forever. Images served from Cloudflare's global content delivery network.

Simple HTTP API

No dependencies to install. Simple authentication. Works with any language, any framework.

Retina friendly

Render high resolution @2X images. Clean, crisp, ready for any screen resolution.

Advanced options

Configurable. Set custom height/width. Built in emoji support. Set your format: PNG, JPEG or WebP.

Google Font Support

Need custom fonts? Use the google_fonts parameter to load any font from Google Fonts.