The CodePen Bookmarklet is a quick way to move code from another site over to a Pen on CodePen. You simply drag the button below up into your browsers bookmarks bar. Then when you're on another site, click it to activate it. Then click on blocks of code to add them, then ultimately click the button to move over to CodePen. Here is the bookmarklet itself:

See the Pen CodePen Bookmarklet by codepenio (@codepenio) on CodePen

Step by Step

1. On any website with a block of code, click the CodePen Bookmarklet.

step-1

2. Blocks of code will be highlighted. The CodePen Bookmarklet Bar will show up on bottom of the page.

step-2

3. Click the block(s) of code you want to move. They will add to the Bar.

step-3

4. Click the "Go Play" button and you will move the code to CodePen.

step-4

Special One-Click Pages

There are a few sites that the CodePen Bookmarklet just know what to do on:

  • JSFiddle - The HTML, CSS, and JavaScript code is moved over into the respective editors on CodePen. Your choice of JS library and other settings are mapped over the best we can.
  • GitHub Gists - Doesn't work anymore. You used to be able to one-click to move an exported Gist back to CodePen. GitHub uses CSP now, which is a good thing, but breaks our bookmarklet. Someday we'll have to make it a browser extension.

Video

Here is a video explaining how it works: