If you’re a subscriber to our RSS feeds, you’ll know that they have image previews of the Pens in them. We create an image preview of every single Pen created on CodePen. You can actually access them yourself if you ever want to check them out. For example:
Large Image Preview
Small Image Preivew
You might have also noticed that they don’t always look exactly like the Live Preview you look at while building the Pen. That is because the screenshots come from a specific rendering engine that may not be identical to the one you are using. We generate the screenshots through the WebKit rendering engine through Node.js through PhantomJS. To facilitate this, we were using Francois Zaninotto’s Screenshot as a Service project. That’s a great project, but it had a few issues that were problematic specific to CodePen. Namely:
- Web fonts (@font-face) didn’t render
- Forever loops in JS would kill the PhantomJS server, resulting in a lot of “Screenshot Coming Soon” images until we could fix.
To fix these, we forked the project and fixed it up for us. This now uses Node’s child_process instead of the HTTP server built into PhantomJS. This allows us to kill the process should it run too long (99% chance it’s a forever loop of some kind).
Within this project is our own compiled version of PhantomJS as well, which includes @font-face support. That means screenshots that would have looked like this:
Now render the web font and look proper: