The CodePen Project Editor is designed to let you process 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/ProcessorExtensionOutput type
Markdown.mdHTML
Pug.pugHTML
Nunjucks.njkHTML
Less.lessCSS
Sass (SCSS syntax).scssCSS
Sass (indented syntax).sassCSS
Stylus.stylCSS
CoffeeScript.coffeeJavaScript
TypeScript.tsJavaScript

For files that are in a preprocessor syntax, but 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 and include statements, 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.

Autoprefixer

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.

  • If you are using another processor already, Autoprefixer doesn’t create an additional file, it just runs Autoprefixer after the other processing is done.
  • If you not using a CSS processor, Autoprefixer will make a *.processed.css file.

Bundling

You can turn on JavaScript bundling in the Project Settings. To do so you have to have at least one JavaScript file in your project, and then select one as the “entry point” file. It will then produce a script.processed.js file you can link to for your HTML.

  • Bundling will combine all the JavaScript files that it locally imports.
  • URL-imports (e.g. Skypack) will be left alone.
  • Babel is run over everything.
  • JSX is processed.

Minification

When you turn on minification in your Project Settings, any file that is processed will also be minified. For example, your style.css file will turn into style.processed.css but also be minified, which it is not without turning on this setting. If you don’t use a processor of any kind, the file won’t be minified. Unlike Autoprefixer, just turning on this setting doesn’t automatically make a processed version

Was this article helpful?
YesNo