Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.
It’s absolutely heartbreaking every time we hear about a user who tells us that they’ve lost work they did in CodePen.
Since day one, we’ve put measures into place to try and prevent this from happening. For instance, the simple browser popup that doesn’t let you leave the page if you have unsaved work unless you confirm you’re sure. We also used to save your work to localStorage, but that’s gone now as it caused as many problems as it helped.
Now, we’re doing two new things to help ensure work gets saved.
Every five times you make a change to a Pen without saving, we’ll do a different little UI thingy to remind you to save. Here’s an example:
It does different things, like the Save button might grow in size and then shrink back down. Or you might see a little message flash on top of the screen reminding you of unsaved changes. It will stop bothering you after 26 unsaved changes though. Sometimes you’re trying to live dangerously on purpose. I know. I have a seat belt warning on my truck that I’m grateful shuts up after 100 beeps.
After you have saved your Pen once (whether it’s a brand new Pen or an existing one) we’ll automatically turn on Autosave.
It works on a timer (right now it saves every 30 seconds, but I’m sure we’ll tweak this as time goes on). The big idea is that sometimes you just forget to save (that’s what the majority of cases of folks who’ve lost work have told us), so we’ll do it for you. We’d love to save every keystroke, but it’s just not practical at the moment, so the timer is where we are at.
The reason we don’t immediately enable Autosave, is that it’s reasonable that you might intentionally be editing things just to try them out and not wanting to save (or work with a fork). A side bonus here is that you can now refresh the page (click through the warning) and get back to the last saved state of the Pen (before you had to fight localStorage).
Turning off Autosave
There is no way to turn it off globally or forever for a certain Pen (yet). If it’s enabled on a Pen and you want it off, refresh the page. It won’t turn back on until you save once.
More info on Autosave is in the documentation.