The CodePen Project Editor is designed to let you preprocess, postprocess, and bundle your files without any tooling setup on your part, so you can get started building with your favorite languages right away. There are a few different ways you can choose how your project is processed.

Choosing a processor by using a compatible file extension.

For most of our preprocessors, you can turn on processing for a file by giving it the appropriate file extension. The Project Editor will automatically generate a ‘processed’ version of the file for you.

A SCSS file and its processed file

These are the preprocessors that the Editor currently supports, and their file extensions.

Language/Processor Extension Output type
Markdown .md HTML
Pug .pug HTML
Nunjucks .njk HTML
Less .less CSS
Sass (SCSS syntax) .scss CSS
Sass (indented syntax) .sass CSS
Stylus .styl CSS
CoffeeScript .coffee JavaScript
LiveScript .ls JavaScript
TypeScript .ts JavaScript

For files that you do not want to get processed, prefix the file name with an underscore (_).
Sometimes, you may not want every file with a particular file extension to get processed. For example, a SCSS project may use partial files, or a Pug project may have files for includes. By prefixing the file name with an underscore, the Editor will know not to create a processed file for that file. These files will still be available to the preprocessor for imports & includes, they just won’t get their own output file.

In this Nunjucks project example, only the index.njk and about.njk files need a processed file, so the template and include files are named with an underscore on the front.

Don’t forget to reference the processed version of your CSS and JavaScript files in your HTML! Because the output of the file you’re working on will go to the .processed. file, you should use that link in your HTML.

Choosing a processor in the Project Settings.

Some processors run on files without special file extensions, so you’ll need to elect to use these in the Project Settings.

By switching this processor on, all of your files with the .css extension will be run through autoprefixer, including the processed output from other CSS processors. For example, you can create SCSS files and also run autoprefixer on their resulting CSS.

Webpack and Babel
By turning Webpack and Babel processing on you elect to bundle and transpile your JavaScript files into a single output file. Read more about this in Using Babel in your CodePen Project.

Generating minified files.

If you’d like to generate minified versions of your CSS and JavaScript files, you can turn this setting on in the Project Settings. This will generate a .processed.min. file that you can reference in your HTML.