File Size

One of the limitations of the CodePen editor is sheer volume of code. You may never run across this issue, as the editor should be fine with hundreds or even thousands of lines of code. But when they start hitting 5,000 - 10,000 or more lines of code, you'll see the editor start to fail. Things like:

  • CodePen becomes slow and unresponsive
  • The Pen may not save
  • The browser crashes

It may be an issue of simply too much code. This is essentially a browser memory problem. It's too much for the DOM to handle, not to mention too taxing on the network. The exact limit before performance stuffers will vary from browser to browser and system to system.

We do prevent the saving of Pens with over 1 MB of raw code in the editors. We'll put up a warning dialog to tell you what's going on in that case.

One way to have less code in Pens is to make use of external resources. For instance, if you're using a large library of CSS or JS, upload it as an asset and link to it rather that putting all the code directly in the editor. Or, export the Pen and work with it locally.

Relative Assets

Linking to any asset via a relative file path will not work in a Pen. Like...

<img src="/images/image.png" alt="" />

<script src="../../scripts/global.js"></script>

Paths like this reference files in a local file system that doesn't really exist where your Pen preview is loaded. Always link to external assets via fully qualified URLs like http://website.com/resource.jpg