Your username is your User ID and your password is your API Key. Both of these are available from the dashboard. The code samples demonstrate how to authenticate your request.
Treat your API Key like a password. If exposed, it could be used to create images using your account.
Creating an image
To generate an image, make an HTTP request to the API.
The create image endpoint accepts the following parameters. Accepted as either json or formdata.
This is the HTML you want to render. You can send an HTML snippet (<div>Your content</div>) or an entire webpage.
The CSS for your image. When using with url it will be injected into the page.
The fully qualified URL to a public webpage. Such as https://htmlcsstoimage.com. When passed this will override the html param and will generate a screenshot of the url.
For creating an image, either url or html are required. css is optional.
Optional parameters for greater control over your image.
Google fonts to be loaded. Example: Roboto. Multiple fonts can be loaded like this: Roboto|Open Sans
A CSS selector for an element on the webpage. We’ll crop the image to this specific element. For example: section#complete-toolkit.container-lg
This adjusts the pixel ratio for the screenshot. Minimum: 1, Maximum: 3. Learn more.
When set to true, the API will generate an image of the entire height of the page.
Set the width of Chrome’s viewport. This will disable automatic cropping. Both height and width parameters must be set if using either.
Set the height of Chrome’s viewport. This will disable automatic cropping. Both height and width parameters must be set if using either.
"error": "Plan limit exceeded",
"message": "You've used 3055 of your 3000 renders. Upgrade via the Dashboard: https://htmlcsstoimage.com/dashboard"
Getting an image
After creating an image, you can use the returned URL to either download your image, or use it directly in your website.
This URL is permanent for as long as your account is active. It’s automatically cached and optimized by Cloudflare’s global content delivery network. You can use it directly on your webpages and not worry about hurting your page speed score.
Lossless optimization: each image is optimized with no change in image quality.
Global cache: the image is cached near your users to reduce latency.
The API supports jpg, png and webp. If no file extension is passed, you’ll get back a png by default. If you need a different file format, adjust the extension on the url.