Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

SnappySnippet is an amazingly handy little Chrome Extension by Konrad Dzwinel. It allows you to select an HTML element from the Chrome DevTools, then move that element over to CodePen in which to work with it.

Here’s a step-by-step tutorial, after you have it installed.

1) Select the HTML element in DevTools


2) Click over to the SnappySnippet tab, and click the “Create a snippet…” button


3) Click the “Send to CodePen” Button


4) Rock’n’Roll

A new Pen is created with the HTML and CSS moved over for you to start playing with.


Note that SnappySnippet adds ID attributes to every single HTML element, then styles the elements based on those ID’s and the computed CSS values from DevTools. The class names the CSS uses are not the original class names used to style from the actual web page.

For those curious about under the hood, it uses our API for prefilling Pens, which anyone can use.