Codepen-puppeteer NPM

╭─╮     ╭─╮     ╭┬╮     ╭─╮     ╭─╮     ╭─╮     ╭╮╭        ┬    ╭─╮
│       │ │      ││     ├┤      ├─╯     ├┤      │││        │    │ │
╰─╯     ╰─╯     ─┴╯     ╰─╯     ┴       ╰─╯     ╯╰╯    o   ┴    ╰─╯
╭────╮  ╭──╮╭╮  ╭────╮  ╭────╮  ╭──▞─╮   ╭──╮   ╭────╮ ╭────╮ ╭─┬─╮                 
│  ╭╮│  │  │││  │  ╭╮│  │  ╭╮│  │ `◯ │  ╭╯  ╰╮  │ ─  │ │ ─  │ │   │                 
│  ╰╯│  │  ╰╯│  │  ╰╯│  │  ╰╯│  │    │  ╰╮  ╭╯  │    │ │    │ │  ╭╯                 
│   ╭╯  │    │  │   ╭╯  │   ╭╯  │ ───┤   │ ─┤   │ ───┤ │ ───┤ │  │                  
╰───╯   ╰───┴╯  ╰───╯   ╰───╯   ╰────╯   ╰──╯   ╰────╯ ╰────╯ ╰──╯

Use Puppeteer to download pens from Codepen.io as single html pages.

Features

Download example pens as single html pages
Easy preview with an index page
Built-in error recovery to resume download
Skip already downloaded pens
Easy to debug using screenshots
Custom template pages
Easy to follow source code with comments
Support for loading external resources (i.e. jquery, google fonts)

Usage

Clone this project locally,

git clone https://github.com/websemantics/codepen-puppeteer
cd codepen-puppeteer

Install dependencies (puppeteer),

npm i

This package provide two commands to interact with,

search command to download pens matching search query

penpet search flexbox

You can specify start and end page with -s and -e options

Browse to ./pens/index.html to preview full list of downloads

file command to download provided list of pens

penpet file pens.json

File pens.json is provided as an example

For examples and more help, use option -h with both commands

Debug

This project is a proof of concept so you might find problematic pens that wouldn't download fully. Turn the debug flag -d with the file command to enable screenshots which might help you debug the issue,