There are two ways to export your Pens from CodePen. You can download a .zip archive of the Pen, or export it to GitHub as a Gist. You'll find both of these options in the "Export" menu at the bottom of the editor.

Export .zip

Click "Export .zip" on the Export menu, and your browser will start to download the Pen as a .zip.

If you've given your Pen a title, the .zip file will share that title. Otherwise, it gets a name like codepen_wtyri.zip, where the last five characters are the Pen's slug. Private Pens have longer slugs, but will still have a five-letter slug when downloaded.

Un-archive the .zip and you'll get a folder full of files, including the default MIT license if your Pen is public.

export-folder

If you open the index.html file in a browser, it should look exactly as you built it in CodePen. Some extra things to note about exporting this way:

  • If you used an External Resource from a non-CodePen URL, that will be linked up in the <head> of the index.html file as you might expect.
<link rel='stylesheet prefetch' href='http://css-tricks.com/CodePen/external.css'>
  • If you used another Pen as an External Resource, we will export the code as a file from that Pen and link it up internally/relatively.
<link rel='stylesheet prefetch' href='css/wjzms.css'>

If that Pen has an External Resource of it's own, that is not included. Double (or more) level includes aren't supported on CodePen.

  • If you used an HTML include in your Pen, we will include that HTML directly in the index.html file. We will note the section that was included by wrapping it in an HTML comment so you know where it came from. For instance:
<!-- Included from http://codepen.io/chriscoyier/pen/slug -->
<h1>HTML from another Pen here</h1>
<!-- end include -->
  • If the Pen uses Compass, the export will include a config.rb file so that it will work immediately with Compass locally.
  • If you used any preprocessor, we will include both the original code and the preprocessed code in the export. For instance a folder called "scss" with "slug.scss" in it as well as a folder called "css" with "slug.css" in it. The .css will be the one linked to in index.html.

Save as GitHub Gist

GitHub Gist is a code snippet saving/sharing site. If you have a GitHub account, you have a Gist account, too.

If you've connected a GitHub account to your CodePen account you can move any Pen to your Gist account by clicking "Save as GitHub Gist" on the Export menu.

CodePen will try to open up the newly created or updated Gist for you in a new window. Your browser may show a blocked popup warning. You can choose to allow CodePen specifically to let the app open the new window (and others in the future). We also display a link to the Gist, so you can click that if you prefer to leave the popup blocked.

We save only the code you wrote to the Gist. If you write in raw HTML, CSS, and JavaScript, you'll get an index.html, style.css, and script.js file. If you write in Haml, Sass, and CoffeeScript, you'll get an index.haml, style.sass, and script.coffee file.

If your Pen is private, the Gist is saved as a Secret Gist, which means it's not searchable on GitHub.

If you don't have a GitHub account, you can still export your Pen as a Gist. It will be saved as an anonymous Gist on GitHub.

Video Here is a video explaining how exporting Pens works: