Want to get some code out of CodePen? There are several ways to export your Pens from CodePen. You’ll find all the options in the “Export” menu in the Pen Editor.
PRO Export .zip with Build Process
You can export a Pen that comes with a build process, meaning by running an npm script you can run a local server and continue preprocessing your files as you work, much like CodePen itself.
This is a PRO feature and has its own documentation here.
Export .zip
Click “Export .zip” in the Export menu, the Pen will be bundled into a .zip file to download. Here’s a video explaining:
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.
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 on CodePen.
- 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. The external file is not included in the zip, therefore pens with external resources are not completely offline.
<link rel='stylesheet' 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' 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.
- If the Pen includes ES Modules, the exported files will need a server to run because CORS headers cannot be set for local files.
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.