Websnap is a service that allows you to take screenshots from a html source and instantly serve them as an image or save it for later use. This can be extremely useful for generating dynamic og:images for social sharing. Just think of creating images for product detail pages or blog posts.

Getting started

To use Websnap you'll need to register and create a project.

We will create a unique token for each project which can be restricted to certain target hosts.

Our free plan offers you 250 generated images / month — enough to try out the service or experiment on hobby-projects. Please refer to our pricing section for details.


HTML to image

The API base url is and can be called with a GET or POST request. It will return an image response and therefore can be used as an <img> source. You should either provide a target url or a string of html which should be converted to an image.

An example request could call this url:

You can also use one of our language/framework agnostic packages which provide a client wrapper for api interactions.


Remember that you should either provide the url or the html parameter.

Name Type Default Description
url* String The websites url of which a screenshot should be made
html* String The html source code of which a screenshot should be made
token* String The project's token
viewport_width Integer 800 The viewport width which is used to take the screenshot
viewport_height Integer 600 The viewport height which is used to take the screenshot
hidden String Pass a css selector to hide matching elements from the screenshot. Eg.: hidden=.cookie-banner
wait Integer 0 Defer the screenshot by the passed amount of milliseconds after the page is loaded.

* Required parameter


Use the endpoint to convert HTML to PDF.

An example request could look like this:<h1>Hello World</h1>

The same parameters as for the Image API apply for generating PDFs. But some additional parameters are available:

Name Type Default Description
format String A4 Paper format. Will have precedence over viewport_width and viewport_height. Possible options: Letter, Legal, Tabloid, Ledger, A0, A1, A2, A3, A4, A5, A6

Hide elements

You want to hide this ugly cookie banner from your good looking og:image template? No problem, we got you covered!

Just add the websnap-hidden attribute to any element you would like to hide from the image.

<div class="cookie-banner" websnap-hidden>...</div>

You can't change your html markup?

The API also accepts a css selector as a query string parameter. Where any matching element will be hidden on the resulting screenshot. Learn more about the hidden parameter.

Using og:images

Open Graph images can be used to make your links look better and even increase the click conversion when somebody shares your page on Twitter, Facebook or many other platforms/devices.

To get started with og images you need some basic tags that resemble meta tags of your page.

<meta property="og:title" content="Your title">
<meta property="og:description" content="Your description">
<meta property="og:image" content="">
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>
<meta property="og:url" content="YOUR_URL">


Twitter needs a few more tags that enable a larger preview image:

<meta name="twitter:title" content="Your title">
<meta name="twitter:description" content="Your description">
<meta property="twitter:image" content="">
<meta name="twitter:card" content="summary_large_image">


We also provide packages for a convenient use in your favorite language/framework.



Use this HTML Playground to tinker around with our image/PDF generation.

Feedback & Feature requests

Do you need a specific feature or have some feedback for us?
Please don't hesitate and get in touch with us!