Depict aims to easily render fallback images for complex visualizations. (IE 8, I'm looking at you.)
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Depict aims to easily render fallback images for complex visualizations. (IE 8, I'm looking at you.)

Given a URL and CSS selector, depict outputs a PNG file of the rendered element.

With depict, charts based on living data can be rendered into flat images at regular intervals, no human interaction required. Think jobs numbers, congressional votes, etc.


  • Include an extra CSS file before rendering, useful for hiding UI components that don't make sense for static images
  • Optionally let depict know when it's OK to take a screenshot with the --call-phantom option


Depict requires PhantomJS, which can be installed on OS X via Homebrew.

brew update
brew install phantomjs

Then, install depict from npm. The global install is recommended for easy command-line access.

npm install -g depict


Usage: depict URL OUT_FILE [OPTIONS]

  -h, --help              Display help                                                               [default: false]
  -s, --selector          CSS selector                                                               [default: "body"]
  -c, --css               CSS file(s) to include in rendering                                        [default: false]
  -H, --hide-selector     Hide attributes of this selector before rendering.                         [default: false]
  -w, --browser-width     Specify the desired browser width.                                         [default: 1440]
  -d, --delay             Specify a delay time, in milliseconds.                                     [default: 1000]
  --call-phantom          Whether to wait for the target page to call `callPhantom()`.               [default: false]
  --call-phantom-timeout  How long to wait for the target page to call `callPhantom()`, in seconds.  [default: 30]


For a specific chart:

depict \ \
-s '#g-chart-va' \

To render the full graphic:

depict \ \
-s '#main' \

To hide certain components, such as UI elements:

depict \ \
-s '.g-us-map-grid' \
us-wine.png \
-H '.g-us-map-slider'

To include a CSS file:

depict \ \
-s '.g-us-map-grid' \
us-wine.png \
-c exclude-ui.css

To wait until the target page is ready (see examples/callback.html for a working example):

// Add this piece of code on the target page when depict should take
// the screenshot.
if (typeof window.callPhantom === 'function') {
    window.callPhantom({ target: 'depict', status: 'ready' });

depict \ \
out.png \

Pro tips

Run a local webserver to use depict during development:

python -m SimpleHTTPServer 1337
depict chart.png -s '#chart'

Add a line in your Makefile to run depict automatically. (You are using make, right?)

fallback/chart.png: index.html
    depict $@ -s '#chart'

Hide multiple CSS selectors by using commas:

depict \ \
-s '.g-us-map-grid' \
us-wine.png \
-H '.g-us-map-slider, .g-map-legend-click'

Include multiple CSS files by using commas:

depict \ \
-s '.g-us-map-grid' \
us-wine.png \
-c 'hide-ui.css,touch-device.css'