DailyJS

Pageres: Responsive Screenshots

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

design node apps

Pageres: Responsive Screenshots

Posted by Alex R. Young on .
Featured

design node apps

Pageres: Responsive Screenshots

Posted by Alex R. Young on .

Pageres

Sindre Sorhus sent in pageres (GitHub: sindresorhus / pageres, License: MIT, npm: pageres), a command-line tool for generating screenshots of websites.

You can install it with npm install --global pageres, and then run it with a URL and a size:

pageres http://dailyjs.com/2014/02/12/node-roundup/ --sizes 800x600  

It's based on webshot, which is another small module that wraps around PhantomJS. There are other modules like pageres, but what I like about it is the focus on sizes: you could script it to generate screenshots of responsive websites. The command-line options allow you to specify many dimensions at once, so it's easy to generate results for a responsive site.

This will work well if you've got marketing materials that include screenshots, or if your designers want to see useful outputs from a CI server.

Another cool feature is the Node API:

var pageres = require('pageres');

pageres(['todomvc.com'], ['1366x768', '1600x900'], function () {  
  console.log('done');
});

I've made a few lightweight wrappers around PhantomJS before -- there's a HTML to PDF invoice generator in production that I made last year that's been ticking over nicely. However, I like the focus on dimensions in pageres, and the command-line interface is very friendly.