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

Export panel with Export Zip selected

Click "Export .zip" on the Export menu, the Pen will be bundled into a .zip file to download.

If you've given your Pen a title, the .zip file will share that title. Otherwise, it gets a name like CodePen_Export_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 the Pen is public and a README.markdown with the Pen's details.

Exported Zip File Structure

There are two folders, /src/ contains the code exactly as typed into CodePen with the proper extensions based on the preprocessor used, and /dist/ contains the browser-ready preview with compiled HTML, CSS and JavaScript.

If you open the /dist/index.html file in a browser, it should look exactly as you built it in CodePen.

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 have connected your GitHub account to your CodePen account at login, 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.