node package manager


Creates screenshots for pages


A lib for generating multiple screenshots

Currently only works on osx.

brew install webkit2png
npm install multishot --save-dev
npm install multishot -g
Usage: multishot [opts]
  -o     Output directory                                        [default: process.cwd()]
  -t     Temp directory. Note: This directory will be truncated. [default: "/tmp/multishot/"]
  -u     List of urls to use.
  -f     File containing list of urls (One url per line).
  -p     Prefix for output file.
  -d     Device Profile. Pass with no option to see available presets.
  -w     Sets viewport width.
  -h     Sets viewport height.
  -a     Sets user agent.
  --tpl  Template file.
multishot -f example/urls.txt -o ~/Desktop
multishot -u -o ~/Desktop

The text file must contain one url per line. Blank lines are permitted for formatting. You may optionally group urls by putting a group name on its own line. Note: group names cannot contain http.

See example/urls.txt for an example

var Screenshot = require('multishot').Screenshot;
var urls = [
      group: 'Circles',
      url: ''
      group: 'Circles',
      url: ''
      group: 'Circles',
      url: ''
      url: ''
      group: 'News+Inspiration',
      url: ''
var options = {
  temp: '/tmp/multishot/',
  output: '/tmp/multishot/',
  style: {
    bodyBackground: 'pink',
    custom: '.url { text-decoration: underline; }'
var shot = new Screenshot(urls, options);
shot.on('start', function(){
shot.on('progress', function() {
  // Update progress bar if you have one 
shot.on('complete', function(file) {
  // do something on complete 
shot.on('err', function(err) {
  // Something bad happened 

start Triggered when start() is called and passes the webkit2png check.

Triggered every time an image is rendered and once on complete.

Triggered once the file image has been generated. Returns the path to composed image.

Returns an exception or string.

A path to render the final composed image. Will be created if it doesn't exist.

Temp path where screenshots will be taken. Will be created and truncated each run so be careful when setting. Default: /tmp/multishot/

A handlebars HTML file to use as the combined template. See custom template section for more information.

prefix Prefix will be added to the output file. Example: dev-20131015.png

Multishot uses a handlebars template to generate the combined image. While the default template is nice, you may want to customize it:


var shot = new Screenshot(urls, {
  template: '/Users/WalterWhite/templates/multishot.html'

The bare minimum your template should have is:

<!DOCTYPE html>
  <base href="{{base}}">
  {{#each grouped}}
  <div class="group">
    {{#each this}}
    <div class="screenshot-container">
      <div class="url">{{this.url}}</div>
      <img src="{{}}/{{this.index}}-full.png" class="screenshot">

Templates are passed the following variables:

Base path to load images

Object containing all grouped images. See example HTML above for usage.

Various different values that a template can use to customize the css. See Styles section for available values.

These are the default styles:

Variable Value
background #fff
bodyFontFamily "Lato", sans-serif
bodyFontWeight 400
bodyFontColor #7f8c8d
bodyFontSize 12px
bodyLineHeight 17px
groupMargin 40px 0
screenshotImgBorder 4px solid #d35400
h2FontSize 24px
h2FontColor #2C3E50
h2FontWeight 700
h2Margin 2px 0
urlFontStyle italic

You can override or add new variables by passing them as properties to the styles option value.

If you want to pass in a full block of css:

var options = {
  styles: {
    custom: '.someSelector{ background: white }'

The custom property can contain any css as long as its valid. If you need any more control you should look into writing a unique template to match your needs.