CodePen makes it easy to play with different front-end technologies. We handle any code processing for you. For example, you can choose to write your CSS in Sass. All you need to do to make that happen is select Sass from the list of CSS preprocessors.

CodePen also lets you export what you make. We’ll give you what you wrote, along with the processed code. With PRO export, you’ll be able to easily keep building off CodePen, because you’ll get a build script that can process your code offline.

npm install

npm run serve

Curious about the specifics? There’s a DOCUMENTATION.markdown file included in the .zip that will explain.

Upgrade to PRO to give it a try.

Does this mean I can use CodePen offline?

Kinda! The build process, after the initial npm install will run without any network connectivity, which is great for situations with spotty connections where you need to continue your work. Note that any external styles and scripts are not included in the export, so you’ll need to include those separately if you want to be truly offline.

Need to come back to CodePen after working locally?

Right now the export is a one-way street, as we don’t have a true write API yet (though we do have a Prefill API). To get your code back onto CodePen, copy and paste.

Warning! Things that don’t work

This build process is not a full copy of CodePen. There are a few limitations that can’t be handled by the script (yet!).

• Slim & Haml These languages are essentially Ruby-only, which doesn’t play well with a typical Node build process. For now, you get a preprocessed version of your code in HTML that you can use the rest of the build process with.

• Preprocessor Add-Ons Utilizing Compass, Nib, lesshat or any other built-in preprocessor add-ons? They aren’t yet supported out of the box in the export & build process, but you can manually add and import them as needed.

• Pens-as-Resources There’s an existing issue with Pens-As-Resources in Zip Exports that also breaks in Export with Build Process. We have a fix coming soon.