Limitations

Pens have as few limitations as we can reasonably provide. For instance, you can make as many of them as you like! But there are some limitations we impart for practical and safety reasons.

Limitations on Number of Files per Pen and File Size

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

No limits on folders.

Limitations on Bandwidth of Deployed Sites

We don’t intend to be stingy on charging you for bandwidth on your deployed sites. But in order to be reasonable and not make promises beyond what we’re able to provide as a business, accounts are limited to 5 TB of bandwidth per month.

Limitations on Collaborators per Pen

We also don’t intend to limit you on how many Editors and Viewers you can invite to a Pen. But for the sake of maintainability and making sure things don’t get too crazy, the limit is currently set to 100 for both.

Limitations on File Types

CodePen has a whitelist of files that are able to be used on Pens. It is intended to be permissive, but limited to practical web usage. Files like .exe are not permitted as they aren’t relevant on the web.

If there is a file type you’d like to use that is CodePen isn’t letting you upload, contact support.

Limitations on API Usage

There are currently no limits on API usage. Bear in mind our current API is limited to POST to Prefill. But we do expect to launch a more complete GraphQL API in the future, so if you have ideas on what you would want out of that, please contact support.

Limitations on Code

We don’t limit the code that you put in a Pen, but depending on where the code renders and displays, we may strip some of it or render certain APIs inert for safety and UX reasons.

For example, as you browse CodePen in views like Trending or User Profiles, Pens might be displayed in Grid View and shown as a small <iframe>. In that case, we do things like make the alert() method not actually show an alert (otherwise that would be very annoying!).

In that same vein, we strip things like:

<!-- `meta` refresh tags in HTML -->
<meta http-equiv="refresh" content="5; url=http://example.com/">

<!-- The `autofocus` attribute, which may even pull focus away from the code editors as you work -->
<input autofocus>

<!-- The `download` attribute, which can be a part of forced download of files which you don't want to see when just browsing around -->
<a href="" download>

<!-- Can be the cause of sound leaks -->
<iframe></iframe>Code language: HTML, XML (xml)

// Prevent infinite reloading
location.reload();

// Prompts / Popups
alert();
confirm();
prompt();Code language: JavaScript (javascript)

Packages

You can use third-party libraries and packages off npm so long as they are offered from a CDN that you can link to. For instance, you can link to React for usage on CodePen with an ESM link like this:

import React from 'https://esm.sh/react@18.2.0'
import ReactDOM from 'https://esm.sh/react-dom@18.2.0'

const App = () => {
  return(
    <div className="box">
      Hello, World! 
    </div>
  );
}

ReactDOM.render(<App />,
document.getElementById("root"));Code language: JavaScript (javascript)

We also support bare imports like:

import React from "react";
import ReactDOM from "react-dom"Code language: JavaScript (javascript)

Those imports are converted into an <script type="importmap"> and injected into the served HTML (based on versions in a package.json file) so it’s essentially not that different from using a CDN URL.

If a file uses a bare import like above in a server-processed file (e.g. vite.config.js) those imports likely will not work, aside from packages that are built-in to the Block itself (e.g. vue is available in the Vue block).