Example code for converting HTML/CSS to an Image with Ruby. Renders the image exactly like Google Chrome.

In this post, you'll learn how to convert html/css to an image with Ruby

HTML to Image with Ruby

Try it out yourself with the live demo.

Plain Ruby example

To create an image, you need to send a POST request to the v1/image endpoint.

The API takes your HTML/CSS and runs it inside a real instance of Google Chrome to generate the image.



Data type: String (required)

This is the HTML you want to render. You can send an HTML snippet (<div>Your content</div>) or an entire webpage.

External JS and CSS are supported.

You can include script tags and <link> tags to CSS. Be sure that any assets you include are available via a full publicly accessible URL so that we can download them before rendering.


Data type: String (optional)

The CSS for your image.


Data type: String (optional)

Google Fonts to be loaded before rendering the image. To see all of the fonts available, visit:

Single font

Pass the font name as the parameter.


Multiple fonts

Separate multiple fonts with a |.

Roboto|Roboto Condensed|Open Sans

This script will send HTML/CSS to the API and get back a URL to your new image. You'll need an API key to use this example.

If you'd like to try it out first without writing any code, take a look at the demo.


This example uses the HTTParty gem. Install with gem install httparty, or add it to your Gemfile.

Example code

require "httparty"
# Retrieve your user id and api key from the Dashboard
auth = { username: 'user_id', password: 'api_key' }
html = "<div class='ping'>Pong ✅</div>"
css = ".ping { padding: 20px; font-family: 'sans-serif'; }"
image ="",
body: { html: html, css: css },
basic_auth: auth)
# => {"url"=>""}

Advanced examples

Need help?

Email us [email protected]

Share with us what you're building. We're experts at generating images and love to help.