All Pens have a file system. A Pen is essentially a root folder where all the files live and are processed from. You may have as many files and folders in a Pen as your current plan provides.

File Limits per Pen

Pens owned by users on the free plan on CodePen are limited to three files. If you’d like to add more files to a Pan, a PRO plan is required.

PRO Plan	Files Allowed Per Pen	File Size per File (Text)	File Size per File (Media)	Custom Domains with Deployed Pens
Free	3	1 MB	Not Allowed	0
Starter PRO	20	1 MB	5 MB	5
Developer PRO	50	1 MB	10 MB	10
Super PRO	200	1 MB	15 MB	25

Creating Files & Folders

You can create files and folders multiple ways:

• Drag and drop (or use the Upload button) to add files from your computer to the Pen
• Click the dedicated buttons for adding new blank/empty files and folders.
• Use the Omnibar (Command-K) and search for the command “New File”
• Command-Shift-F creates a new file (there is no default command for folders)

Uploading Files & Folders

Many files and folders can be updated at once via drag and drop onto the Files Panel or by using the Upload button and selecting them via operating system file selector.

Uploading this way is subject to the limits of the owner of the Pen’s plan.

What counts as a file?

Any file that is user-authored or user-uploaded is counted as a file. Folders and configuration files are not counted against the limit. There are no limits to the number of files that the CodePen Compiler produces in the Build Output.

For instance, all Pens have a .codepen folder and a pen.config.json file inside, neither of which counts toward the limit.

.codepen             | not counted
  pen.config.json    | not counted
  sass.config.json   | not counted
index.html           | counted
package.json         | not counted
prettier.config.json | not counted
script.js            | counted
styles               | not counted
  style.scss         | counted

Above, the total count is 3 files.

Configuration Files

All Blocks have at least one configuration file. For example, Prettier has a file called prettier.config.json at the root. If you create this file yourself, Prettier will be automatically added to your Pen. If you add the Prettier Block another way, this file with the default contents will be scaffolded into your Pen automatically.

If you delete or rename this file while the Prettier Block is still active on your Pen, another copy of the file will be scaffolded again into your Pen, as it is required for the Prettier Block to work. If you need to remove a configuration file from your Pen, you must first disable or delete the related Block from your Pen.

What is pen.config.json?

This is a required file in all Pens that contains config for various things that the CodePen Compiler needs to build your Pen. This file is not editable, deletable, moveable, or renamable.

What is the .codepen folder?

All Pens have this folder and you cannot remove it. The purpose of the folder is that it contains configuration that is unique to CodePen. For example, the pen.config.json file described above. But this folder may contain other config files as well. For example, the config file for Sass, sass.config.json, we put into that folder, because Sass doesn’t offer configuration via file, but that’s something we wanted to offer at CodePen. So, because it’s a CodePen offering, not an industry standard, we put it in the .codepen folder. Configuration files that are standard (for example, tsconfig.json) are placed in the industry-standard location (the root, in the case of tsconfig.json).

Protected Files & Folders

There are some files you cannot delete from a Pen. The folder ./codepen and the file inside pen.config.json are protected in that way. You will not see menu options for deleting these files, and a reminder is the small lock icon you can see overlapping their icons.

The Difference Between Files and Assets

Files can be a part of a specific Pen, or uploaded to Global Assets.

Say you have a file called rainbow.jpg. You can upload that directly to a Pen (if you have a PRO plan) and then use it with a relative filepath in your other code. For example, HTML might use it like <img src="./rainbow.jpg" alt="A lovely rainbow."> or CSS might use it like background-image: url(./rainbow.jpg);.

If the intention for a file (e.g. an image, CSS file, JavaScript file, or 3D model file) is to be used across multiple Pens, it may make more sense to upload it to Assets. Assets is more like a global bucket of files that is easily accessible from any Pen. Files you link from assets are required to be a fully qualified URL, rather than a relative URL. This URL is provided when you Copy URL from any Asset. So you’d see an image used more like <img src="https://assets-development.codepen.io/3/rainbow.jpg" alt="A lovely rainbow."> in HTML.

Assets have access to special URL parameters for images, allowing you to resize, optimize and more.

Linking to Files

Linking to Files & Supported File Path Structures

When you link to a file uploaded to a Pen, using a relative file path like any of these will work:

/mountains.jpg	Find file starting at the root directory
./mountains.jpg	Find file starting at the current directory
mountains.jpg	Find file starting at the current directory

The required Link block knows how to make sense of those and link them to the correct File.

Linking to Files with Fully Qualified URLs

Pens also expose their files at URLs with a special query parameter to load the file directly. If a Pen has a file called rainbow.jpg to the root of a Pen, there will be a public URL to it at:

https://codepen.io/user/pen/editor/WNqRjbj?file=/rainbow.jpgCode language: JavaScript (javascript)

File Limitations

Files in Pens are limited in file extension to a whitelist that includes all extensions that Blocks support (e.g. .scss) and commonly known binary file types (e.g. .jpg). CodePen tries to be permissive about this, but intentionally blocks some known problematic file extensions (e.g. .exe) that have no practical utility on the web anyway. If there is a file extension you’re trying to use that CodePen isn’t letting you use, ask support.

Scaffolding and File Limits

When you add a Block that scaffolds files for that Block, if you don’t have the space available to add them, you’ll be warned.

HTML Includes

In any .html file (or file that a Block processes into HTML) you can use a special syntax for including another HTML-esque file within it. For an example, and index.html file could be like:

<!DOCTYPE html>
<html>
<head>
  <title>Website</title>
</head>
<body>
  {{{ https://codepen.io/chriscoyier/pen/AvYQdv?file=/header.html }}}

  <h1>Hello, Templating!</h1>

  {{{ https://codepen.io/chriscoyier/pen/AvYQdv?file=/footer.html }}}
</body>
</html>Code language: HTML, XML (xml)