Link Search Menu Expand Document

JavaScript: HTML/CSS to Image

Generate a png, jpg or webp images with JavaScript. Renders exactly like Google Chrome.

Live demo Get an API Key


Table of contents

Generating images with JavaScript

  1. The API takes your HTML/CSS and runs it inside a real instance of Google Chrome to convert your html into an image.
  2. Use JavaScript to send the API your HTML/CSS.
  3. You’ll get back json with the URL to your generated image.

For more details on how this works, see Creating an image.

Example API response:

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

Image generated with JavaScript.

Authentication with JavaScript

The API uses HTTP Basic authentication.

Your username is your User ID and your password is your API Key. Both of these are available from the dashboard. The JavaScript code sample demonstrates how to authenticate your request.

You can signup for a free API key to get started.

Free API Key for JavaScript


JavaScript example code

This JavaScript code example sends an HTTP POST to the https://hcti.io/v1/image API. Converting your HTML/CSS to an image with JavaScript.

This example uses the Request client. Install with npm install request.

const request = require('request')

// Define your HTML/CSS
const data = {
  html: "<div class='box'>JavaScript ✅</div>",
  css: ".box { border: 4px solid #03B875; padding: 20px; font-family: 'Roboto'; }",
  google_fonts: "Roboto"
}

// Create an image by sending a POST to the API.
// Retrieve your api_id and api_key from the Dashboard. https://htmlcsstoimage.com/dashboard
request.post({ url: 'https://hcti.io/v1/image', form: data})
  .auth(API_ID, API_KEY)
  .on('data', function(data) {
    console.log(JSON.parse(data))
  })

// {"url": "https://hcti.io/v1/image/1113184e-419f-49f1-b231-2069942a186f"}

To see all of the available parameters, see: Creating an image.

Can I use this in a browser?

We recommend only using the API server-side. This is important because it keeps your API key secret. If you expose them in the browser, they can be used by anyone.


JavaScript example - async/await

If your code supports async/await, we recommend using the following.

This example uses the Request promise client. Install with npm install request-promise.

require('request')
const request = require('request-promise')

// Define your HTML/CSS
const data = {
  html: "<div class='box'>JavaScript ✅</div>",
  css: ".box { border: 4px solid #03B875; padding: 20px; font-family: 'Roboto'; }",
  google_fonts: "Roboto"
}

// Create an image by sending a POST to the API.
// Retrieve your api_id and api_key from the Dashboard. https://htmlcsstoimage.com/dashboard
const image = await request
  .post({ url: 'https://hcti.io/v1/image', form: data})
  .auth(API_ID, API_KEY)

const { url } = JSON.parse(image)

// {"url": "https://hcti.io/v1/image/1113184e-419f-49f1-b231-2069942a186f"}

Plain JavaScript (Node.js) example

If you prefer not to install an HTTP library for making the request. This example shows you how to use the API without any dependencies.

const https = require('https')

const data = JSON.stringify({
  html: "<div class='box'>JavaScript ✅</div>",
  css: ".box { border: 4px solid #03B875; padding: 20px; font-family: 'Roboto'; }",
  google_fonts: "Roboto"
})

// Retrieve your api_id and api_key from the Dashboard. https://htmlcsstoimage.com/dashboard
const apiId = "your-api-id"
const apiKey = "your-api-key"

const options = {
  hostname: 'hcti.io',
  port: 443,
  path: '/v1/image',
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Basic ' + new Buffer(apiId + ':' + apiKey).toString('base64')
  }
}

const req = https.request(options, (res) => {
  console.log(`statusCode: ${res.statusCode}`)

  res.on('data', (d) => {
    const image = JSON.parse(d)
    console.log(image["url"])
  })
})

req.on('error', (error) => {
  console.error(error)
})

req.write(data)
req.end()

Client side JavaScript example with Fetch API

  • Use the Fetch API to make an HTTP POST request to the API
  • Supported by modern browsers
  • Recommended for internal applications only to keep your API key safe
const json = {
  html: "<div class='test'>Hello, world!</div>",
  css: ".test { background-color: green; }"
};

const username = "user-id";
const password = "api-key";

const options = {
  method: 'POST',
  body: JSON.stringify(json),
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Basic ' + btoa(username + ":" + password)
  }
}

fetch('https://hcti.io/v1/image', options)
  .then(res => {
    if (res.ok) {
      return res.json();
    } else {
      return Promise.reject(res.status);
    }
  })
  .then(data => {
    // Image URL is available here
    console.log(data.url)
  })
  .catch(err => console.error(err));

Need help?

Talk to a human. Please email us support@htmlcsstoimage.com with any questions and we’ll gladly help you get started.


Back to top

Built with extensive integration tests and serious care for developer happiness.
© 2018-2020 Code Happy, LLC.

Page last modified: Oct 29 2020 at 02:54 PM.

Edit this page on GitHub.