Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Puppeteer GIF Cast

This little application was written out of necessity for writing documentation about UX/UI. All it does is starts a headless instance of puppeteer, loads the url passed to it, and scrolls the page taking screenshots. At the end it will stitch all the screenshots into one gif as if it was a screencast.

This utility expects two mandatory arguments and one optional:

  • URL: the url of the website you want to screencast
  • NAME: the name of the gif (.gif will be automatically appended at the end)
  • ScrollBy: the ammount of scroll to use during the scrolling. If nothing is passed it will scroll by 100 pixels.

GIFs are saved in the ./gifs/ folder at the end of the process.

How to use it

clone the repository to your machine:

git clone

cd puppeteer-gif-cast

initialize the project

npm install

to grab a screencast of a website run the command like this:

npm run cast every-last-drop 500

the generated gif will be located at ./gifs/every-last-drop.gif

alt text

the last parameter can be ommited safely like so:

npm run cast javascript

alt text


  • Implement W x H parameters. Right now it defaults to 768x600
  • Implement duration time. Right now it takes 60 screenshots and stops
  • Make code more resilient. Any invalid arguments or parameters break the code as it is.
  • Test it on MacOs and *nix


Creates screencasting-like gifs of page-scrolls



No releases published


No packages published