A Vue.js full stack webapp that allows users to take a screenshot of a website given its URL. Supports SPA, lazy-loaded sites, and more! Full page screenshot support is available.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
snapshotjs-client Updated template with div wrappers and updated reset button method. Sep 4, 2018


SnapshotJS - Website Screencapture Tool

SnapshotJS is a Vue.js full stack web application which allows users to input a URL to any website, and it will generate a screenshot of the website.

DEMO: https://snapshotjs.herokuapp.com


  • Works with most Vue.js, React.js, and Angular.js SPA sites.
  • Works with most lazy-loaded sites (ex: www.latimes.com).
  • Works in full screen (viewport) or full page mode screenshots.
  • Multiple sizes to choose from (this also determines the full page mode's width dimension).
  • Currently exports as a .jpeg file since .jpeg is smaller and no transparency is needed for such websites. If you need a .png export, you'll have to find a tool online to convert the .jpeg to .png.


Eric Liang


Here are the requirements to get this project running.

  1. Node v7.6.0 or higher
  2. NPM Package Manager
  3. If you are a developer, it is preferable you understand Vue.js, Node.js, SCSS, and Express.js

Setup and Installation

Here is the process to setup the project.

  1. Clone the repository from https://github.com/ewliang/SnapshotJS-Website-Screencapture-Tool.git
  2. Run "npm install" in snapshotjs-server folder via your command prompt.
  3. Run "npm install" in snapshotjs-client folder via your command prompt.
  4. Run "npm run dev" in snapshotjs-server folder to start the server at localhost:4000.
  5. Run "npm run dev" in snapshotjs-client folder to start the client at localhost:3000.
  6. Navigate to your browser and go to localhost:3000 and you can start using the webapp.

NOTE - You must have both the client and the server running at the same time. All changes made are automatically updated since the server's command "npm run dev" is powered by nodemon.


Heroku Deployment Notes

  • Make sure to have the following:

Environment Variables

  • HOST
  • NODE_ENV production