File Size

One of the limitations of the Pen 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, and sometimes too taxing on the network. The exact limit before performance suffers will vary from browser to browser and system to system.

We disable save on Pens with over 1 million characters total or 1 MB of code. We’ll put up a warning dialog to tell you what’s going on in that case.

If you have a whole lot of code to work with, consider moving from the Pen editor to the Project editor instead! Projects is a multi-file editor that lets you work on a much larger scale.

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, which Pens don’t have (but Projects do!). Always link to external assets via fully qualified URLs like: https://website.com/resource.jpg